admin 管理员组

文章数量: 894198

CSS学习之绘制几何图形

绘制半圆

绘制半圆其实就是用到border-radius属性

效果图:

代码:

<div class="contain"><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div>
</div>
.contain {width: 100%;height: 100%;position: absolute;background-color: rgb(252, 252, 252);display: flex;padding: 30px;}.contain div {width: 0;height: 0;margin-left: 30px;border: 4em solid;box-sizing: border-box;border-radius: 50%;outline: 1px dashed black;}.div1 {border-color: green skyblue transparent transparent !important;}.div2 {border-color: transparent skyblue purple transparent !important;}.div3 {border-color: transparent transparent orange purple !important;}.div4 {border-color: green transparent transparent orange !important;}

绘制扇形

扇形主要是通过设置其中一处的border-radius的值为100% ,来实现。

 代码:

<div class="contain1"><div class="div11"></div><div class="div12"></div><div class="div13"></div><div class="div14"></div>
</div>
.contain1 {width: 100%;height: 10em;background-color: rgb(252, 252, 252);display: flex;padding: 30px;}.contain1 div {width: 4em;height: 4em;background-color: aquamarine;border-color: aqua;border: 1px solid black;margin-left: 20px}.div11 {border-radius: 100% 0 0 0;}.div12 {border-radius: 0 100% 0 0;}.div13 {border-radius: 0 0 100% 0;}.div14 {border-radius: 0 0 0 100%;}

绘制三角形

div的宽高设置为0, 然后某一边框设置为具体颜色,其他三个设置为透明,就可以出现对应方向的三角形。

代码:

<div class="contain2"><div class="div21"></div><div class="div22"></div><div class="div23"></div><div class="div24"></div></div>

 

.contain2 {width: 100%;height: 10em;background-color: rgb(252, 252, 252);display: flex;padding: 30px;}.contain2 div {width: 0;height: 0;border-style: solid;margin-left: 20px}.div21 {border-color: transparent skyblue transparent transparent;border-width: 4em;}.div22 {border-color: skyblue transparent transparent transparent;border-width: 4em;}.div23 {border-color: transparent transparent skyblue transparent;border-width: 4em;}.div24 {border-color: transparent transparent transparent skyblue;border-width: 4em;}

本文标签: CSS学习之绘制几何图形