<div class="semi-circle">半圓</div>
.semi-circle {
    border-radius: 100px 100px 0 0;
    height: 50px;
}

 

【CSS】CSS畫矩形、圓、半圓、弧形、半圓、小三角、疑問框

div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 100px;
    background-color: red;
}

毫無疑問，結合HTML就可以畫出最基本的 矩形：

 

 

<div>矩形</div>

效果：

下面針對矩形做一些變換：

圓形：

border-radius圓角的四個值按順序取值分別為：左上、右上、右下、左下。

原理：四個角都是圓角：四個角的取值為50%或為寬和高一樣的值（此處即100px）。

<div class="circle">圓形</div>
.circle {
    border-radius: 50%;
}

半圓：

原理：左上、右上角是圓角，右下、左下角是直角： 左上角、右上角的值為寬和高一樣的值，右下角、左下角的值不變（等於0）；另外，因為還要設置高度值為原來高度的一半才是標准的半圓。

<div class="semi-circle">半圓</div>
.semi-circle {
    border-radius: 100px 100px 0 0;
    height: 50px;
}

 

扇形：

 原理：左上角是圓角，其余三個角都是直角：左上角的值為寬和高一樣的值，其他三個角的值不變（等於0）。

<div class="sector">扇形</div>
.sector {
    border-radius: 100px 0 0;
}

 

弧形：

 原理：兩個對角變，另外兩個對角不變：比如，左上角、右下角取值為寬和高一樣的值，右上角、左下角的值不變（等於0） .添加transform屬性可旋轉成平躺的弧形，類似人的嘴巴形狀，(*^__^*) 嘻嘻……

<div class="arc">弧形</div>
.arc{
        border-radius: 100px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

 

小三角：

原理：設置邊框，並把原來div的寬和高的值設置為0，即把原來的矩形壓縮成只有邊框，但因為設置的邊框值比較大（為了保證三角形看起來不會太小或者太細），然后設置每一個邊框的顏色不同，就可以看出三角形其實就可以是由邊框變換而來的。若只想顯示某一塊三角形，可以把其他的邊框顏色設置為透明，即transparent。

<div class="triangle"></div>
<div class="arrow"></div>
.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;
    }

疑問框：

 

原理：由圓角矩形和一個小三角組成：可結合偽元素、定位實現。

<div class="rectangle">疑問框</div>
/*圓角矩形*/
    .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;
    }