css 尖角如何实现(不要用图片,建议transform:skew)

2025-01-01 14:08:41
推荐回答(3个)
回答1:

可以用border来实现:
.test{width:0; height:0; border:10px solid; border-color:#ff3300 transparent transparent transparent;}
上面是一个等边三角形,如果你需要更高或者可以把border:20px 10px
或者保留不同的边框,你就会发现不同的东西,比如:
.test{width:0; height:0; border-width:0 0 20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}这句出来的效果就是你图上的效果了。
自己调整一下就会发现不同的东西了。CSS3画三角形也大概这样做。

当然用HTML5的html canvas来画更简单,但是支持情况嘛,旧浏览器支持不好。

回答2:

据说html5可以实现

回答3:

直接百度查“HTML5实现尖角”就会有答案