Question

我想在下面的图片中创建一个看起来像红色三角形的三角形：

所以，我试着用css运气如下：

HTML：

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>

CSS：

.div-1 {
    position: absolute;
    bottom: 0; left: 0;
    border-bottom: 385px solid #222;
    border-right: 175px solid transparent;
    width: 0;
    z-index: 5;
    pointer-events:none;
}

.div-2 {
    position: absolute;
    bottom: 0; left: 45px;
    border-bottom: 285px solid #ED3237; 
    border-right: 130px solid transparent;
    width: 0;
    z-index: 5;    
}

.div-3 {
    position: absolute;
    bottom: 0; left: 45px;
    border-bottom: 286px solid #222;
    border-right: 105px solid transparent; 
    width: 0;
    z-index: 5;
    pointer-events:none;        
}

我明白了。这是JSFiddle

现在，当我将鼠标悬停在它上面时，我希望将三角形的颜色更改为蓝色。

所以，我尝试了这个CSS：

.div-2:hover{
    border-bottom: 285px solid blue; 
}

乍一看，它看起来工作正常。但如果我们仔细研究一下，我们就会注意到这个问题。

每当鼠标指针位于.div-2的透明区域时，三角形的颜色也会改变。我不希望这样。当光标悬停在.div-2的可见（红色）部分上时，我只想将三角形的颜色更改为蓝色。

所以，我再次搜索谷歌。这解释了我应该使用rotate transform而不是borders div。

但是我找不到一个关于创建不同宽度和高度的直角三角形的好教程，如上所述。所以，我问了这个问题。这是一个问题：如何使用旋转变换，css3属性创建如上图所示的三角形。

更新

SVG非常简单。但我想用css完成它，因为我还打算隐藏旋转木马的底部部分，如下所示：

Answer 1

在充分尊重的情况下，您的要求并没有多大意义。从我看到的地方，您不应该要求使用（或其他）技术 执行此。

代码是惯例这一切都归结为使用一些约定而不是其他约定，以便在特定浏览器中显示我们想要的结果。使用什么技术或语言并不重要，只要它们实现结果而不会对其他功能/行为产生副作用。

回到你的问题，你在尝试控制元素的:hover状态时遇到困难，而不是另一个边界。

当然，您可以为元素添加一个遮罩，从而限制指针事件，但是，为什么不首先使用遮罩来显示？

以下是我如何处理这种布局：

＆＃13;
＆＃13;
.image-container { background-color: #222; position: relative; } .image-container img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-clip-path: polygon(0 0, 73% 0, 100% 50%, 100% 100%, 27% 100%); clip-path: polygon(0 0, 73% 0, 100% 50%, 100% 100%, 27% 100%); } l-border, r-border { position: absolute; height: 100%; width: 100%; background-color: #600; top: 0; transition: background-color .5s cubic-bezier(.5, 0, .3, 1); } l-border:hover, r-border:hover { background-color: red; } l-border { -webkit-clip-path: polygon(0 0, 24% 100%, 27% 100%); clip-path: polygon(0 0, 24% 100%, 27% 100%); } r-border { -webkit-clip-path: polygon(73% 0, 100% 50%, 76% 0); clip-path: polygon(73% 0, 100% 50%, 76% 0); } body { margin: 0; } /* changing both borders when hovering image just showing you it's possible */ .image-container img:hover ~ * { background-color: #f50; }
＆＃13;
<div class="image-container"> <img src="https://unsplash.it/1200/450" /> <l-border></l-border> <r-border></r-border> </div>
＆＃13;
＆＃13;
＆＃13;

根据图片比例甚至响应度，您可能更喜欢px而不是%：

.image-container img { -webkit-clip-path: polygon(0 0, calc(100% - 150px) 0, 100% 50%, 100% 100%, 150px 100%); clip-path: polygon(0 0, calc(100% - 150px) 0, 100% 50%, 100% 100%, 150px 100%); } l-border { -webkit-clip-path: polygon(0 0, 130px 100%, 150px 100%); clip-path: polygon(0 0, 130px 100%, 150px 100%); } r-border { -webkit-clip-path: polygon(calc(100% - 130px) 0, 100% 50%, calc(100% - 150px) 0); clip-path: polygon(calc(100% - 130px) 0, 100% 50%, calc(100% - 150px) 0); }

我个人所做的是转到Clippy以快速获得基本形状多边形（接近我想要的）并在浏览器中根据我的需要对其进行微调，应用于实例，直到它适合目前的法案。

您应该注意clip-path并非完全支持，目前处于88.42%支持。可以说没有什么＆＃34; micro＆＃34;或＆＃34;软＆＃34;关于目前clip-path的财产。

Answer 2

我尽力了https://codepen.io/CrUsH20/pen/owWeNo

您可以在设置中更改手写笔预处理器，它将显示为纯CSS。您需要在中间区域按向下箭头并选择View compiled CSS。

使用旋转变换创建直角三角形以校正三角形

2 个答案: