How to use html to make arrowheads

In this article, the editor introduces in detail "how to use html to make arrowheads", the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use html to make arrowheads" article can help you solve your doubts.

1. Write box code

First of all, we use the development tool to set the coding format to Utf-8 (the general file is in this format, here we use the HBuilderX editor) to add the following code to the .html file:

Html small Arrow skills

We also add class attributes to the code to facilitate our styling.

two。 Add Styl

We achieve the desired effect by adding an inline css style to the .html file, as follows:

Html small Arrow technique / * margin-left will appear double margin bug in ie. Solution: add display:inline to style. * / * {padding: 0px; margin: 0px;} # content {width: 100px; height: 100px; margin: 0 auto; border: 1px solid red; position: relative } / * the width of the sharp corner of the small triangle is set to zero / .dd {position: absolute; top: 20px; left: 10px; border-width: 20px 20px 0px 20px Border-color: black transparent transparent transparent; border-style: solid dashed dashed dashed;}

In the code we added absolute positioning position: absolute; to set our arrow position. Through the style, we can complete the setting of the arrow.

Read here, this article "how to use html to make arrows" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.