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

时间：2017-06-20 20:02:11

标签： html css css3

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

enter image description here

所以，我试着用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完成它，因为我还打算隐藏旋转木马的底部部分，如下所示：enter image description here

2 个答案:

答案 0 :(得分：3)

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

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

回到你的问题，你在尝试控制元素的: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的财产。

答案 1 :(得分：1)

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

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

相关问题
最新问题