css画图案

来源：互联网发布：ica负熵的迭代算法编辑：程序博客网时间：2024/04/30 13:11

如图

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>画图</title><style>body{padding: 100px;}*{margin:0;padding: 0}li{list-style: none;}.container{margin:100px auto;position: relative;}.quadrangle{}.first,.other li{width:200px;height: 36px;margin-right: 5px;}.first{border-top-left-radius: 18px;border-bottom-left-radius: 18px;border-top-right-radius: 15px;float: left;border: 2px solid #77c077;-webkit-transform: skew(30deg);}.other{float: left;}.other li{float: left;border-radius: 10px;border: 2px solid #77c077;-webkit-transform: skew(30deg);}.line {width: 1032px;background: #689731;height: 5px;position: absolute;top: 36px;border-bottom-left-radius: 20px;left: 18px;border-bottom-right-radius: 20px;}</style></head><body><div class="container"><!-- 四边形 --><div class="quadrangle"><div class="first"></div><ul class="other"><li></li><li></li><li></li><li></li></ul></div><!-- 横线 --><div class="line"></div></div></body></html>

阅读全文

0 0