晴海小常识分享

晴海小常识分享

当前位置：首页 > 编程笔记 > 正文
已解决

【CSS】画个三角形或圆形或环

来自网友在路上 146846提问 提问时间：2023-09-20 23:16:06阅读次数： 46

最佳答案 问答题库468位专家为你答疑解惑

首先通过调整边框，我们可以发现一些端倪 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box{width: 150px;height:150px;border: 50px solid black;}</style><body><div class="box"></div></body>
</html>

接着我们通过调整各个边框（例如border-top）的属性后发现 这些分割点棱角分明

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box {width: 150px;height: 150px;border-top: 50px solid cyan;border-right: 50px solid red;border-bottom: 50px solid green;border-left: 50px solid gray;}</style><body><div class="box"></div></body>
</html>

在把宽高都设为0后，发现这个图形逐渐清晰起来 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box {width: 0px;height: 0px;border-top: 50px solid cyan;border-right: 50px solid red;border-bottom: 50px solid green;border-left: 50px solid gray;}</style><body><div class="box"></div></body>
</html>

把任意两个三角形颜色设为一样，剩下的透明后就能获得三角形了

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box {width: 0px;height: 0px;border-top: 50px solid red;border-right: 50px solid red;border-bottom: 50px solid transparent;border-left: 50px solid transparent;}</style><body><div class="box"></div></body>
</html>

 

同理，通过改变边框的border-radius属性还能让其变成圆形，环等。 

查看全文

99%的人还看了

相似问题

猜你感兴趣

版权申明

本文"【CSS】画个三角形或圆形或环"：http://eshow365.cn/6-10273-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！

推荐回答

网站内容来自网络，如有侵权请联系我们，立即删除！粤ICP备2023082154号