给一个随内容高度变化的div加上三角点CSS？

Question

我有一个div，我需要给它一个angular分。高度将根据其内容而变化，因此使用下面文章中的伪内容和边框是行不通的。

http://css-tricks.com/snippets/css/css-triangle/

由于这是一个渐进的增强功能，我只需要支持现代浏览器。

Answer 1

我会尝试在后台使用 SVG：

div {
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100"><rect x="-5" y="-5" width="90" height="110" fill="#fff" /><polygon fill="green" points="0,0 80,50 0,100"/></svg>');
    background-position:100% 50%;
    background-size:auto 100%;
    background-repeat:no-repeat;
    background-color:green;
}

http://jsfiddle.net/wm1am7ry/

注意：SVG 图像有一个白色背景矩形和一个绿色三角形。因此，如果箭头下方的背景不是纯色，它将不起作用。

如果宽度固定，您可以将 SVG 放置在绿色框外的生成内容中，这样可以避免箭头下方出现白色背景：

http://jsfiddle.net/wm1am7ry/1/

div {
    background-color:green;
    padding:20px;
    margin:10px 0;
    width:100px;
    position:relative;
}
div::after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:100%;
    width:100%;
        background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100"><polygon fill="green" points="0,0 80,50 0,100"/></svg>');
    background-position:0 50%;
    background-size:auto 100%;
    background-repeat:no-repeat;
}

Answer 2

您可以使用 svg 来做到这一点。

svg's(background) height 完全取决于 #content's(text) 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;
}

<div id="container">
  <svg id="bg" width="150" height="100%" viewBox="0 0 150 100" preserveAspectRatio="none">
    <path d="M0,0 h110 l40,50 l-40,50 h-110z" fill="#6ED901" />
  </svg>
  <div id="content">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.</div>
</div>

Answer 3

CSS 剪辑路径

这使用 clip-path 属性，许多现代浏览器不支持它。

#one {
  width: 300px;
  background-color:#6ED901;
  padding:10px;
  word-break: break-all;
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

span{
  width:240px;
  display:block;
}

<div id="one"><span>Dynamic. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span></div>

CSS - 渐变

浏览器对 CSS 渐变的支持相当好。请注意，这与 Vals 的 答案基本相同，只是具有动态高度。

.shape {
    width: 200px;
    background-color: #6ED901;
    position: relative;
    word-break:break-all;
    text-align: justify;
    padding: 10px 0 10px 10px;
}
.shape:after, .shape:before {
    content: "";
    position: absolute;
    left: 100%;
    width: 80px;
    height: 50%;
}
.shape:before {
    top: 0px;
    background: linear-gradient(to top right, #6ED901 50%, transparent 51%);
}
.shape:after {
    bottom: 0px;
    background: linear-gradient(to bottom right, #6ED901 50%, transparent 51%);
}

<div class="shape">Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi</div>

CSS + JS

以下解决方案使用 CSS 和 JS 并跨浏览器工作。 JS 由 web-tiki.

提供

var height = document.getElementById('one').offsetHeight/2;
document.getElementById('two').style.borderTopWidth = height + 'px';
document.getElementById('two').style.borderBottomWidth = height + 'px';

*{
    margin:0;
    padding:0;
}
#one{
    width:200px;
    background-color:#6ED901;
    display:block;
    word-break: break-all;
    padding:10px;
    float:left;
}
#two{
    display:block;
    float:left;
    position:absolute;
    left: 220px;
    width:0px;
    height: 0;
    border-style: solid;
    border-right-width:0;
    border-left-width:80px;
    border-color: transparent transparent transparent #6ED901;
}

<div id="wrap">
  <div id="one"> ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg</div>
  <div id="two"></div>
</div>

Answer 4

替代答案，使用渐变和伪元素

#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%);
}

<div id="one" class="corner"></div>
<div id="two" class="corner"></div>

Answer 5

这也可以通过使用倾斜和旋转来完成

.cont {
  margin: 20px 0;
}
.arrow {
  background: #6ED901;
  padding: 10px;
  position: relative;
  width: 100px;
}
.arrow:after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: #6ED901;
  top: 0;
  transform: skew(14deg, 19deg) rotate(43deg);
  transform-origin: right;
  z-index: -1;
  right: 0;
}
.cont {
  overflow: hidden;
}

<div class="cont">
  <div class="arrow">. Proin faucibus arcu quis ante.Proin faucibus arcu quis ante.Proin faucibus arcu quis ante.Proin faucibus arcu quis ante. Proin faucibus arcu quis ante.</div>
</div>
<div class="cont">
  <div class="arrow">Proin faucibus arcu quis ante.Proin faucibus arcu.Proin faucibus arcu quis ante.Proin faucibus arcu.</div>
</div>
<div class="cont">
  <div class="arrow">Proin faucibus arcu quis ante.Proin faucibus arcu.</div>
</div>

给一个随内容高度变化的div加上三角点CSS？

Add a triangular point to a div that changes with the content height with CSS?

html

css

css-shapes

CSS 剪辑路径

CSS - 渐变

CSS + JS