将一个三角形点添加到使用CSS更改内容高度的div？

Question

我有一个div,我需要给它一个角点.高度将根据其内容而变化,因此使用伪内容和边框(如下文中的内容)将无法使用.

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

由于这是渐进式增强,我只需要支持现代浏览器.

Answer 1

你可以这样做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;
}

<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 2

另一个答案,使用渐变和伪元素

#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>