Yuan Blog

Appearance

border-radius ​

在 css3 之前绘制圆形通常使用 UI 给出的设计图作为背景或者 icon 使用。

比如画一个圆形：

<div class="box"></div>

<style>
    .box{ 
        width:60px;
        height:60px;
        background:url('./xxx.png') no-repeat center center;
    }
</style>
<div class="box"></div>

<style>
    .box{ 
        width:60px;
        height:60px;
        background:url('./xxx.png') no-repeat center center;
    }
</style>

css3 问世后，可以使用 border-radius 绘制圆形。

比如绘制一个圆形：

<div class="box"></div>

<style>
    .box{ 
        width:200px;
        height:200px;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        background-color:#f00;
    }
</style>
<div class="box"></div>

<style>
    .box{ 
        width:200px;
        height:200px;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        background-color:#f00;
    }
</style>

样式可以简写成：

.box{ 
        width:200px;
        height:200px;
        border-radius: 50%;
        background-color:#f00;
    }
.box{ 
        width:200px;
        height:200px;
        border-radius: 50%;
        background-color:#f00;
    }

绘制半圆形 ​

绘制半圆形考虑将长度或宽度减少一半（如：width: 200 那么 height: 100）。

比如绘制一个半圆形：

<div class="box"></div>

<style>
    .box{
        width: 100px;
        height: 200px;
        border-radius: 100px 0 0 100px;
        background-color:#f00;
    }
</style>
<div class="box"></div>

<style>
    .box{
        width: 100px;
        height: 200px;
        border-radius: 100px 0 0 100px;
        background-color:#f00;
    }
</style>

伪元素 ​

:first-letter：可以控制文本首个汉字或字母样式。

:first-line：可以控制文本首行样式。

比如：

<p>You can use the x pseudo-element to add a special effect to the first letter of a text!</p>

<style>
p{ 
    width:30px;
    height:30px;
    font-size: 14px;
    border:1px solid #000;
}
p::first-letter{
    font-size: 24px;
}
p::first-line{
    color: #f00;
}
</style>
<p>You can use the x pseudo-element to add a special effect to the first letter of a text!</p>

<style>
p{ 
    width:30px;
    height:30px;
    font-size: 14px;
    border:1px solid #000;
}
p::first-letter{
    font-size: 24px;
}
p::first-line{
    color: #f00;
}
</style>

before 与 :after 在元素前与元素后插入新内容。注意的是必须使用 content 属性。

比如：

<div class="box">讲台词</div>

<style>
    .box::before{ 
        content: '小明'
    }
    .box::after{ 
        content: '很棒！'
    }
</style>
<div class="box">讲台词</div>

<style>
    .box::before{ 
        content: '小明'
    }
    .box::after{ 
        content: '很棒！'
    }
</style>

CSS3绘制一个正方形均分的三角形 ​

<div class="box"></div>

<style>
.box{ 
    border-top:50px solid #999;
    border-left: 50px solid #f00;
    border-bottom: 50px solid #0f0;
    border-right: 50px solid #00f;
    width:0;
    height:0;
}
</style>
<div class="box"></div>

<style>
.box{ 
    border-top:50px solid #999;
    border-left: 50px solid #f00;
    border-bottom: 50px solid #0f0;
    border-right: 50px solid #00f;
    width:0;
    height:0;
}
</style>

CSS3绘制三角形 ​

<div class="box"></div>

<style>
.box{ 
    border-top:50px solid transparent;
    border-left: 50px solid #f00;
    border-bottom: 50px solid transparent;
    border-right: 0 solid #00f;
    width:0;
    height:0;
}
</style>
<div class="box"></div>

<style>
.box{ 
    border-top:50px solid transparent;
    border-left: 50px solid #f00;
    border-bottom: 50px solid transparent;
    border-right: 0 solid #00f;
    width:0;
    height:0;
}
</style>

绘制单独三角形，将该三角形的反向 border 属性设置为 0，其他方向 border 属性设置为透明 transparent。

CSS3绘制对话框 ​

<div class="dialog">Hello, everyone！</div>


<style>

.dialog{
    width:200px;
    height:60px;
    background-color:#6a6;
    border-radius:10px;
    position: relative;
}

.dialog::before{
    content:'';
    border-top:10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 0 solid #6a6;
    border-right: 10px solid #6a6;
    position: absolute;
    top: 20px;
    left: -10px;
}


</style>
<div class="dialog">Hello, everyone！</div>


<style>

.dialog{
    width:200px;
    height:60px;
    background-color:#6a6;
    border-radius:10px;
    position: relative;
}

.dialog::before{
    content:'';
    border-top:10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 0 solid #6a6;
    border-right: 10px solid #6a6;
    position: absolute;
    top: 20px;
    left: -10px;
}


</style>

CSS3绘制菱形 ​

首先绘制正方形，然后使用 transform 旋转（rotate）属性，旋转一定角度，即变化成菱形。

<div class="diamond"></div>


<style>

.diamond{
    width:200px;
    height:200px;
    background-color:#6a6;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);   
    
    margin: 200px;
}


</style>
<div class="diamond"></div>


<style>

.diamond{
    width:200px;
    height:200px;
    background-color:#6a6;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);   
    
    margin: 200px;
}


</style>

CSS3绘制平行四边形 ​

首先绘制长方形，然后使用 transform 倾斜（skew） 属性，倾斜一定角度，即变化成平行四边形。

<div class="parallel"></div>


<style>

.parallel{
    width:200px;
    height:100px;
    background-color:#6a6;
    -webkit-transform: skew(45deg);
    -ms-transform: skew(45deg);
    -o-transform: skew(45deg);
    transform: skew(45deg); 

    margin:200px;
}

</style>
<div class="parallel"></div>


<style>

.parallel{
    width:200px;
    height:100px;
    background-color:#6a6;
    -webkit-transform: skew(45deg);
    -ms-transform: skew(45deg);
    -o-transform: skew(45deg);
    transform: skew(45deg); 

    margin:200px;
}

</style>

skew 有两个参数： skew(x轴, y轴)。

CSS3 绘制五角星 ​

首先绘制一个钝角三角形，然后旋转正 35 度；使用伪元素绘制一个锐角和一个钝角三角形，分别旋转逆时针 35 度和逆时针 70度。

<div class="star"></div>

<style>

.star{
    width:0;
    height:0;
    border-top:0px solid #f00;
    border-bottom:70px solid #f00;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
    transform: rotate(35deg);

    position: relative;
    margin:  200px auto;
}

.star::before{
    content: '';
    border-top:0px solid #f00;
    border-bottom:80px solid #f00;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    -webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    transform: rotate(-35deg);

    position: absolute;
    top: -45px;
    left: -62px;

}

.star::after{
    content: '';
    border-top:0 solid #f00;
    border-bottom: 70px solid #f00;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    transform: rotate(-70deg);

    position: absolute;
    top: 3px;
    left: -105px;
}


</style>
<div class="star"></div>

<style>

.star{
    width:0;
    height:0;
    border-top:0px solid #f00;
    border-bottom:70px solid #f00;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
    transform: rotate(35deg);

    position: relative;
    margin:  200px auto;
}

.star::before{
    content: '';
    border-top:0px solid #f00;
    border-bottom:80px solid #f00;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    -webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    transform: rotate(-35deg);

    position: absolute;
    top: -45px;
    left: -62px;

}

.star::after{
    content: '';
    border-top:0 solid #f00;
    border-bottom: 70px solid #f00;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    transform: rotate(-70deg);

    position: absolute;
    top: 3px;
    left: -105px;
}


</style>

CSS3 绘制六角形 ​

六角形由两个三角形拼在一起绘制成功。

首先绘制一个锐角三角形，然后使用伪元素绘制一个锐角三角形，使用相对定位结合绝对定位。

<div class="star"></div>


<style>

.star{
    width:0;
    height:0;
    border-top:0 solid #f00;
    border-bottom:100px solid #f00;
    border-left:50px solid transparent;
    border-right:50px solid transparent;

    margin:  100px auto;
    position: relative;
}

.star::after{
    content:  '';
    width: 0;
    height: 0;
    border-top:100px solid #f00;
    border-bottom:0 solid #f00;
    border-left:50px solid transparent;
    border-right:50px solid transparent;

    position: absolute;
    top: 30px;
    left: -50px;
}

</style>
<div class="star"></div>


<style>

.star{
    width:0;
    height:0;
    border-top:0 solid #f00;
    border-bottom:100px solid #f00;
    border-left:50px solid transparent;
    border-right:50px solid transparent;

    margin:  100px auto;
    position: relative;
}

.star::after{
    content:  '';
    width: 0;
    height: 0;
    border-top:100px solid #f00;
    border-bottom:0 solid #f00;
    border-left:50px solid transparent;
    border-right:50px solid transparent;

    position: absolute;
    top: 30px;
    left: -50px;
}

</style>

CSS3 绘制梯形 ​

首先绘制一个正方体的梯形。

<div class="zheng"></div>

<style>
.zheng{
    width:50px;
    height:50px;
    border-top:50px solid #f00;
    border-bottom:50px solid #0f0;
    border-left:50px solid #00f;
    border-right:50px solid #ff0;

}
</style>
<div class="zheng"></div>

<style>
.zheng{
    width:50px;
    height:50px;
    border-top:50px solid #f00;
    border-bottom:50px solid #0f0;
    border-left:50px solid #00f;
    border-right:50px solid #ff0;

}
</style>

由以上绘制梯形，并且左右 border 减小。

<div class="zheng"></div>

<style>
.zheng{
    width:50px;
    height:0;
    border-top:50px solid #f00;
    border-bottom:0 solid #0f0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;

}
</style>
<div class="zheng"></div>

<style>
.zheng{
    width:50px;
    height:0;
    border-top:50px solid #f00;
    border-bottom:0 solid #0f0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;

}
</style>

CSS3 绘制五边形 ​

<div class="wu"></div>

<style>
.wu{
    width:50px;
    height:0;
    border-top:50px solid #f00;
    border-bottom:0 solid #0f0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;

    margin: 100px auto;
    position: relative;

}

.wu::before{
    content:'';
    border-top:0 solid #f00;
    border-bottom:45px solid #f00;
    border-left:45px solid transparent;
    border-right:45px solid transparent;

    position: absolute;
    top: -95px;
    left: -20px;
}

</style>
<div class="wu"></div>

<style>
.wu{
    width:50px;
    height:0;
    border-top:50px solid #f00;
    border-bottom:0 solid #0f0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;

    margin: 100px auto;
    position: relative;

}

.wu::before{
    content:'';
    border-top:0 solid #f00;
    border-bottom:45px solid #f00;
    border-left:45px solid transparent;
    border-right:45px solid transparent;

    position: absolute;
    top: -95px;
    left: -20px;
}

</style>

CSS3 绘制六边形 ​

六边形由一个长方形和两个三角形拼接结合。

<div class="six"></div>

<style>

.six{
    width:200px;
    height:100px;
    background-color:#f00;

    margin: 200px auto;
    position: relative;
}

.six::before{
    content:  '';
    border-top: 0 solid #0f0;
    border-bottom: 50px solid #0f0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;

    position: absolute;
    top: -50px;
    left: 0;

}

.six::after{
    content:  '';
    border-top: 50px solid #0f0;
    border-bottom: 0 solid #0f0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;

    position: absolute;
    top: 100px;
    left: 0;
}


</style>
<div class="six"></div>

<style>

.six{
    width:200px;
    height:100px;
    background-color:#f00;

    margin: 200px auto;
    position: relative;
}

.six::before{
    content:  '';
    border-top: 0 solid #0f0;
    border-bottom: 50px solid #0f0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;

    position: absolute;
    top: -50px;
    left: 0;

}

.six::after{
    content:  '';
    border-top: 50px solid #0f0;
    border-bottom: 0 solid #0f0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;

    position: absolute;
    top: 100px;
    left: 0;
}


</style>

CSS3 绘制心 ​

绘制两个长方形，每个长方形各一方使用 border-radius 绘制半圆，使用 transform-origin 旋转焦点属性，两个长方形旋转一定角度拼接结合。

<div class="heart"></div>


<style>

.heart{
    width:50px;
    height: 80px;
    background-color:#f00;
    border-radius: 30px 30px 0 0;
    transform-origin: 0 100%;
    transform: rotate(-45deg);

    margin: 200px auto;
    position: relative;
}

.heart::before{
    content:  '';
    width:50px;
    height: 80px;
    background-color:#f00;
    border-radius: 30px 30px 0 0;
    transform-origin: 100% 0;
    transform: rotate(90deg);
    position: absolute;
    top: 80px;
    left: 30px;
}



</style>
<div class="heart"></div>


<style>

.heart{
    width:50px;
    height: 80px;
    background-color:#f00;
    border-radius: 30px 30px 0 0;
    transform-origin: 0 100%;
    transform: rotate(-45deg);

    margin: 200px auto;
    position: relative;
}

.heart::before{
    content:  '';
    width:50px;
    height: 80px;
    background-color:#f00;
    border-radius: 30px 30px 0 0;
    transform-origin: 100% 0;
    transform: rotate(90deg);
    position: absolute;
    top: 80px;
    left: 30px;
}



</style>

CSS3 绘制蛋形 ​

<div class="egg"></div>


<style>

.egg{
    width: 126px;
    height:180px;
    background-color:#f00;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

    margin: 200px auto;
}

</style>
<div class="egg"></div>


<style>

.egg{
    width: 126px;
    height:180px;
    background-color:#f00;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

    margin: 200px auto;
}

</style>

CSS3 绘制太极阴阳图 ​

绘制一个圆形，使用伪元素设置两个小圆，结合相对定位和绝对定位拼接。

<div class="taiji"></div>


<style>

body{
    background-color:#ccc;
}

.taiji{
    width:150px;
    height:300px;
    border-radius: 50%;
    background-color: #fff;
    border-left:  150px solid #000;

    margin: 200px auto;
    position: relative;
}

.taiji::before{
    content:  '';
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid #000;
    background-color: #fff;

    position: absolute;
    left: -75px;
    top: 0;
}

.taiji::after{
    content:  '';
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid #fff;
    background-color: #000;

    position: absolute;
    top: 150px;
    left: -75px;
}

</style>
<div class="taiji"></div>


<style>

body{
    background-color:#ccc;
}

.taiji{
    width:150px;
    height:300px;
    border-radius: 50%;
    background-color: #fff;
    border-left:  150px solid #000;

    margin: 200px auto;
    position: relative;
}

.taiji::before{
    content:  '';
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid #000;
    background-color: #fff;

    position: absolute;
    left: -75px;
    top: 0;
}

.taiji::after{
    content:  '';
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid #fff;
    background-color: #000;

    position: absolute;
    top: 150px;
    left: -75px;
}

</style>