<div >矩形</div>
<div class="circle" >圆形</div>
<div class="semi-circle" ><p style="position:absolute;margin-top:-20px;margin-left:30px;">半圆</p></div>
<div class="sector" >扇形</div>
<div class="rectangle" >疑问框</div>
<div class="arc" ><p style="position:absolute;margin-top:0px;margin-left:30px;font-weight:bold;-webkit-transform: rotate(-40deg);">弧形</p></div>
<div class="triangle" ><p style="position:absolute;margin-top:-50px;margin-left:-25px;color:red;font-weight:bold;">多邊形</p></div>
<div class="arrow" ><p style="position:absolute;margin-top:-85px;margin-left:-22px;color:#fff;font-size:14px;">三角形</p></div>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 15px;
background-color: red;
}
.circle {
border-radius: 50%;
}
.semi-circle {
border-radius: 100px 100px 0 0;
height: 50px;
}
.sector {
border-radius: 100px 0 0;
}
.arc{
border-radius: 100px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/*圆角矩形*/
.rectangle{
width: 200px;
border-radius: 15px;
position: relative;
}
/*小三角*/
.rectangle::before{
content: "";
width: 0;
height: 0;
border: 15px solid red;
border-color: red transparent transparent transparent;
position:absolute;
bottom: -30px;
left: 40px;
}
.triangle{
border: 50px solid green;
width: 0;
height: 0;
border-top-color: yellow;
border-right-color: blue;
border-bottom-color: pink;
border-left-color: orange;
}
.arrow{
background: none; /*为了清除前面div设置的背景颜色*/
border: 50px solid red;
width: 0;
height: 0;
border-color: red transparent transparent transparent;
}
</style>
~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~
"你是獵人還是獵物？"
