是否可以制作不是典型的直角三角形的CSS三角形/箭头并应用渐变?

前端之家收集整理的这篇文章主要介绍了是否可以制作不是典型的直角三角形的CSS三角形/箭头并应用渐变?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道要在CSS中创建一个基本箭头,我可以这样做:
<div class="arrow-button">
    <span class="arrow-tip-container">
         <span class="arrow-tip"></span>
    </span>
</div>

然后我要做的就是旋转并定位容器,然后填充箭头和BAM!那里;一个甜蜜的箭头:http://jsfiddle.net/uF69S/

但是,我想要一个箭头,其中尖端实际上是120°角,那么使用CSS变换或两个不同的容器可以实现这种效果吗?也许歪斜和旋转?

我想创建这个箭头:

------------\
|            \
|            /
------------/

请注意,箭头不是90°.

注意:
我知道边界三角形可用于制作任何三角形角度,但它们不支持Firefox,Opera或IE中的渐变,而Firefox,Opera和IE可以支持变换(以某种方式).

解决方法

您可以使用倾斜来制作120度的三角形,如下所示:
.arrow-tip {
    display:block;
    width:50px;
    height:50px;
    margin:0 0 0 -20px;
    -webkit-transform:rotate(45deg) skew(20deg,20deg);
 }

另外:http://jsfiddle.net/95Xq8/

原文链接:https://www.f2er.com/css/215394.html

猜你在找的CSS相关文章