han's bolg - 年糕記

css实现一个圆角三角形

发表于 | 分类于 | 热度 ℃
字数统计 266 | 阅读时长 1

项目中有个实现三角图标的需求，因为ui同学没空，所以自己就用css实现了一下，同时推荐一下这个网站，实现样式如下：

1
2
3
4
5
6
7
#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

但debug的时候，ui同学说我稿里的三角形是圆角的，怎么办呢？要么找ui要图，要么自己实现，自己实现的放大后不会虚化对吧。那就自己来吧，这个实现起来难度大了点：

1
2
3
<body>
  <div class="triangle"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; }
.triangle {
	overflow: hidden;
	position: relative;
	margin: 7em auto 0;
	border-radius: 20%;
	transform: translateY(50%) rotate(120deg) skewY(30deg) scaleX(.866);
	cursor: pointer;
	pointer-events: none;
} 
.triangle:before, .triangle:after {
	position: absolute;
	background: orange;
	pointer-events: auto;
	content: '';
}
.triangle:before {
	border-radius: 20% 20% 20% 53%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
			skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle:after {
	border-radius: 20% 20% 53% 20%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
			skewX(-30deg) scaleY(.866) translateX(24%);
}

mark一下