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学习之绘制几何图形
版权声明:本文标题:CSS学习之绘制几何图形 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1688192400h190273.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论