作者:唯一的你b | 来源:互联网 | 2023-05-27 18:31
我有一个div,我需要给它一个角点.高度将根据其内容而变化,因此使用伪内容和边框(如下文中的内容)将无法使用.
http://css-tricks.com/snippets/css/css-triangle/
由于这是渐进式增强,我只需要支持现代浏览器.
1> Weafs.py..: 你可以这样做svg
.
svg
的(背景)height
完全取决于#content
(文本)height
.
Demo on CodePen
#container {
position: relative;
}
svg {
position: absolute;
z-index: -1;
}
#content {
position: relative;
word-break: break-all;
width: 110px;
padding: 10px;
box-sizing: border-box;
}
This content is dynamic and the height of the triangle will change with the height of the content. The width is fixed. Try adding some more text and see the height change. Also, notice the padding.
2> vals..: 另一个答案,使用渐变和伪元素
#one {height: 100px;}
#two {height: 200px;}
.corner {
width: 100px;
background-color: green;
margin: 10px;
position: relative;
}
.corner:after, .corner:before {
content: "";
position: absolute;
left: 100%;
width: 40px;
height: 50%;
}
.corner:before {
top: 0px;
background: linear-gradient(to top right, green 50%, transparent 51%);
}
.corner:after {
bottom: 0px;
background: linear-gradient(to bottom right, green 50%, transparent 51%);
}