如何创建一个 CSS 的三角形，该三角形缩放到父级 div 的高度？

Question

我目前正在创建一个内容块，该块的高度会根据其内容进行缩放。该块需要在一端有一个箭头，该箭头可以缩放到块的高度。

如果可能的话，我理想情况下想要一个纯粹的 CSS 解决方案。我目前正在使用边界三角形方法：https://css-tricks.com/snippets/css/css-triangle/

如下面我的 fiddle 所示，它工作正常，但如果您增加 div 的高度，则它不会将三角形重新缩放到新高度。

<div id="triangle-container">
    Some interesting content goes in here!
</div>

body * {
    box-sizing: border-box;
}

#triangle-container {
    position: relative;
    height: 100px;
    width: 100%;
    background: grey;
    margin-left:50px;
    color: #fff;
    padding: 15px;
}

#triangle-container:before {
    content: '';
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 50px 0;
    border-color: transparent #007bff transparent transparent;
}

Answer 1

CSS

这是因为边框必须适合三角形的高度。只需更改 .triangle-left 中的宽度，您就会看到响应速度。

它最多只能调整到 500 像素高，但这应该绰绰有余。

.contain {
  width: 100%;
}

/*Left pointing*/
.triangle-left {
    width: 5%;
    height: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    overflow: hidden;
}
.triangle-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    
    border-top: 500px solid transparent;
    border-bottom: 500px solid transparent;
    border-right: 500px solid #4679BD;
}

<div class="contain">
  <div class="triangle-left"></div>
</div>

SVG

SVG版本只需要定位。

.contain {
  height: 30px;
}

<div class="contain">
  <svg width="100%" height="100%" viewBox="0 0 500 500">
    <polygon points="0,250 500,0 500,500" style="fill:red;stroke:black;stroke-width:2" />
  </svg>
</div>

Answer 2

这是我使用 jQuery 的方法。它有效，但你必须使用一个小脚本：/

https://jsfiddle.net/64w58wL4/

html

<div id="triangle-container">
    <div id="triangle"></div>
    Some interesting content goes in here!
</div>

css

body * {
    box-sizing: border-box;
}

#triangle-container {
    position: relative;
    min-height: 100px;
    width: 100%;
    background: grey;
    margin-left:50px;
    color: #fff;
    padding: 15px;
}

#triangle {
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 50px 0;
    border-color: transparent #007bff transparent transparent;
}

jQuery 脚本

$(document).ready(function(){
    var triengleHeight = $('#triangle-container').outerHeight()
    $('#triangle').css('border-width', triengleHeight/2 + 'px 50px ' + triengleHeight/2 + 'px 0')
})

Answer 3

我已经找到了一个解决方案（虽然在 IE 中不支持），所以它可能不是最好的方法，具体取决于情况。

解决方案使用背景剪辑属性:

https://jsfiddle.net/xq5wwf3h/32/

body * {
    box-sizing: border-box;
}

#triangle-container {
    position: relative;
    height: 100px;
    width: 100%;
    background: grey;
    margin-left:50px;
    color: #fff;
    padding: 15px;
}

#triangle-container:before {
    content: '';
    position: absolute;
    display: block;
    left: -25px;
    top: 0;
    bottom: 0;
    width: 25px;
    height: 100%;
    background: #007bff;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

如何创建一个 CSS 的三角形，该三角形缩放到父级 div 的高度？

How to create a triangle with CSS that scales to parent div height?

html

css

css-shapes

CSS

SVG