<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS畫矩形、圓、半圓、弧形、半圓、小三角、疑問框</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
margin: 200px auto;
background-color: red;
}
/*圓形
原理：四個角都是圓角：四個角的取值為50%或為寬和高一樣的值（此處即100px） */
.circle {
border-radius: 50%;
/*border-radius圓角的四個值按順序取值分別為：左上、右上、右下、左下。*/
}
/*半圓
原理：左上、右上角是圓角，右下、左下角是直角： 左上角、右上角的值為寬和高一樣的值。右下角、左下角的值不變（等於0）。另外。由於還要設置高度值為原來高度的一半才是標准的半圓。*/
.semi-circle {
border-radius: 200px 200px 0 0;
height: 100px;
}
/*扇形
原理：左上角是圓角。其余三個角都是直角：左上角的值為寬和高一樣的值，其它三個角的值不變（等於0）。*/
.sector {
border-radius: 200px 0 0;
}
/*弧形
原理：兩個對角變，另外兩個對角不變：比方，左上角、右下角取值為寬和高一樣的值。右上角、左下角的值不變（等於0） .加入transform屬性可旋轉成平躺的弧形，類似人的嘴巴形狀，(*^__^*) 嘻嘻……*/
.arc {
border-radius: 200px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/*三角形
原理：設置邊框，並把原來div的寬和高的值設置為0，即把原來的矩形壓縮成僅僅有邊框，但由於設置的邊框值比較大（為了保證三角形看起來不會太小或者太細），然后設置每個邊框的顏色不同。就能夠看出三角形事實上就能夠是由邊框變換而來的。若僅僅想顯示某一塊三角形，能夠把其它的邊框顏色設置為透明，即transparent。*/
.triangle {
border: 100px 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: 100px solid red;
width: 0;
height: 0;
border-color: red transparent transparent transparent;
}
/*疑問框
原理：由圓角矩形和一個小三角組成：可結合偽元素、定位實現。*/
/*圓角矩形*/
.rectangle {
width: 200px;
height: 100px;
line-height: 100px;
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;
}
</style>
</head>
<body>
<div>矩形</div>
<div class="circle">圓形</div>
<div class="semi-circle">半圓</div>
<div class="sector">扇形</div>
<div class="arc">弧形</div>
<div class="triangle"></div>
<div class="arrow"></div>
<div class="rectangle">疑問框</div>
</body>
</html>
