利用css制作带边框的小三角

最新推荐文章于 2025-06-21 09:15:59 发布

weixin_30826095

最新推荐文章于 2025-06-21 09:15:59 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/king-ying/p/7568780.html

本文介绍了两种使用CSS绘制带边框小三角的方法：一种通过旋转元素实现，另一种通过设置元素宽高为0并利用边界来形成三角形。适用于前端开发人员在实际项目中的应用。

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

利用css制作带边框的小三角

标签（空格分隔）：css

在项目中会使用到的小实例，目前知道的有两种方法来实现

设置元素的宽和高，利用rotate实现，比较简单的一种

div{
width: 10px;
height: 10px;
border-right: 1px solid #656565;
border-top: 1px solid #656565;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
设置元素的宽和高为0，利用border实现，制作两个三角

div {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #999           transparent;
}
div:before {
  position: absolute;
  content: '';
  top: 1px;
  left: -9.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9.5px 19px 9.5px;
  border-color: transparent transparent #ffffff         transparent;
}

实现的效果图：