我目前正在创建一个内容 block ,该 block 的高度根据其内容进行缩放。该 block 需要在一端有一个箭头,该箭头可以缩放到 block 的高度。
如果可能的话,我理想情况下想要一个纯 CSS 解决方案。我目前正在使用边框三 Angular 形方法:https://css-tricks.com/snippets/css/css-triangle/
如我下面的 fiddle 所示,这工作正常,但如果您增加 div 的高度,则它不会将三 Angular 形重新缩放到新高度。
https://jsfiddle.net/xq5wwf3h/10/
<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;
}
最佳答案
我找到了一个解决方案(尽管在 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%);
}
关于html - 如何使用 CSS 创建一个可缩放到父 div 高度的三 Angular 形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30753216/