CSS 用border的相关属性写图形

CSS 用border的相关属性写图形

闲暇之时，灵机一动！在初学html和css的过程中，我们经常会使用div盒子进行布局，也会通过设置宽高让盒子来变成不同的矩形，若再添加上border-radius属性的设置还能够让盒子变成圆形或是圆角矩形。
思考：如何用简单的border相关属性写出三角形，梯形等？

1. 圆形

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
提示： 这个属性允许为元素添加圆角边框！

值	描述
length	定义弯道的形状。
%	使用%定义角落的形状。

咱们先来拿圆形练练手，看能不能画一个甜甜圈出来

.circle {
    margin: auto;
    width: 200px;
    height: 200px;
    background-color: skyblue;
    border-radius: 100px;
}

.hollowcircle {
    margin: 20px auto;
    width: 100px;
    height: 100px;
    /* 可以控制border宽度的像素值，来改变甜甜圈的大小 */
    border: 50px solid skyblue;
    border-radius: 50%;
    /* border-left: 100px solid red;
    border-right: 100px solid green;
    border-top: 100px solid blue; */
}

<!-- 圆形 -->
<div class="circle"></div>
<!-- 空心圆 -->
<div class="hollowcircle"></div>

2. 三角形

.alltriangle {
    float: left;
    margin-left: 100px;
    /* 高度和宽度都为0，直接用边框来画 */
    width: 0px;
    height: 0px;
    border: 100px solid skyblue;
    border-left: 100px solid pink;
    border-right: 100px solid greenyellow;
    border-top: 100px solid palegoldenrod;
}

.triangle1 {
    float: left;
    margin-left: 100px;
    /* 高度和宽度都为0，直接用边框来画 */
    width: 0px;
    height: 0px;
    border: 100px solid skyblue;
    /* transparent 透明色  */
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 100px solid transparent;
}

.triangle2 {
    float: left;
    margin-left: 100px;
    /* 高度和宽度都为0，直接用边框来画 */
    width: 0px;
    height: 0px;
    border: 100px solid skyblue;
    border-left: 100px solid skyblue;
    /* transparent 透明色  */
    border-right: 100px solid transparent;
    border-top: 100px solid transparent;
}

<!-- 隐藏之前 -->
<div class="alltriangle"></div>
<!-- 隐藏之后 -->
<div class="triangle1"></div>
<div class="triangle2"></div>

3. 梯形

.alltrapezoidal {
    float: left;
    margin-left: 100px;
    /* 高度和宽度都为0，直接用边框来画 */
    width: 100px;
    height: 100px;
    border: 100px solid skyblue;
    border-left: 100px solid pink;
    border-right: 100px solid greenyellow;
    border-top: 100px solid palegoldenrod;
}

.trapezoidal {
    float: left;
    margin-left: 100px;
    width: 100px;
    height: 100px;
    border: 100px solid skyblue;
    /* transparent 透明色  */
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 100px solid transparent;
}

<!-- 隐藏之前 -->
<div class="alltrapezoidal"></div>
<!-- 隐藏之后 -->
<div class="trapezoidal"></div>

闲来好奇，欢迎大家交流探讨！