首页 > 代码库 > CSS 三角形 圆形

CSS 三角形 圆形

技术分享   技术分享技术分享技术分享技术分享

*{

    margin: 0;
padding: 0;
}
#triangle-up{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-down{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
#triangle-right{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-left{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
#circle{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
<div id="triangle-up">
</div>
<div id="triangle-down">
</div>
<div id="triangle-left">
</div>
<div id="triangle-right">
</div>
<div id="circle">
</div>



CSS 三角形 圆形