HTML+CSS之三角形和扇形的制作

本文主要介绍如何利用CSS制作扇形和三角形。

1.制作扇形

  <!-- 制作半径为50px的半圆 -->
    <div></div>
    <!-- 制作半径为50px的四分之一圆 -->
    <div></div>

 扇形的制作（这里仅限半圆和四分之一圆），核心在于设置四个角的圆角半径大小。

 div:first-child {
            width: 100px;
            height: 50px;
            background-color: orange;
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;
        }
        
        div:nth-child(2) {
            width: 50px;
            height: 50px;
            border-top-right-radius: 50px;
            background-color: orange;
            margin-top: 50px;
        }
        

效果如图：

2.制作三角形

 <!-- 制作边50px，高为50px的等腰三角形 -->
    <div></div>
    <!-- 制作边50px，高为100px直角三角形 -->
    <div></div>

三角形的制作，核心在于设置四条边框的样式，需要结合透明属性的使用。切记：元素宽高须设置为0.

 div:nth-child(3) {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom: 50px solid orange;
            border-left-width: 25px;
            border-right-width: 25px;
        }
        
        div:last-child {
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid orange;
            border-bottom: 50px solid orange;
            border-top: 50px solid transparent;
            margin-top: 50px;
        }

 效果如图：