css 实现带弧度的三角

最新推荐文章于 2022-06-24 14:54:33 发布

weixin_34224941

最新推荐文章于 2022-06-24 14:54:33 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/xuqiang/blog/1527695

本文介绍了一种使用CSS创建特定样式的三角形的方法，通过设置不同的边框属性实现独特视觉效果，适用于网页设计中需要简洁图形元素的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  top: 11rem;
  left: 4.1rem;
  border-bottom-right-radius: 8px;
  border-left: 9rem solid transparent;
  border-top: 1.65rem solid transparent;
  border-bottom: 4rem solid rgba(7, 67, 36, 0.8);
  border-right: 3.55rem solid rgba(7, 67, 36, 0.8);
}

效果如下图：输入图片说明