Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to use css to draw triangles and arrows of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Take a look at the following code first:

.box1 {width:0px;height:0px;border:50px solid red;} .box2 {width:0px;height:0px;border-width:50px;border-style:solid;border-color:red green blue yellow;}

Effect:

In the above effect, we see four triangles. How do we get a triangle? If three of the triangles are transparent, one triangle remains. The css code is as follows:

.box2 {width:0;height:0;border-width:20px;border-style:solid;border-color:red transparent transparent transparent;}

Effect:

If you get a triangle above, think about how to get a triangle in other directions. Where are the arrowheads? The code is attached below

Arrow {width:50px;height:50px;border-width:2px;border-style:solid;border-color:red red transparent transparent;transform:rotate (45deg);} these are all the contents of the article "how to draw triangles and arrows with css". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.