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

This article introduces the relevant knowledge of "CSS how to make arrow icons". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Circle:

.yuan{

width:100px;

height:100px;

-moz-border-radius:50%;

-webkit-border-radius:50%;

border-radius:50%;

background-color:red;

}

elliptical

.oval {

width: 200px;

height: 100px;

background-color: red;

-moz-border-radius: 100px / 50px;

-webkit-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

Arrow:

.arrow{

content: '';

position: absolute;

width: 30px;

height: 30px;

border: 10px solid #f5b24a;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

-ms-transform: rotate(-135deg);

transform: rotate(-135deg);

border-top: none;

border-right: none;

top: 9px;

}

Triangle:

.rencentle {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

"CSS how to make arrow icon" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

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.