HTML / CSS如何：响应形状由矩形+三角形组成

Question

我想通过CSS使下面的形状响应。矩形的宽度为容器的80％，内部有文本。我知道如何使用边框使用css做三角形，但边框只接受像素。如何使整个形状响应，所以当屏幕尺寸较小并且文本内部移动到新线时，三角形会根据矩形的增长而增长？

到目前为止

代码：

byte[] plain = plaintext.getText().getBytes();
byte[] K = key.getText().getBytes();

byte[] encrypted = encrypt(plain, K);
    String a = bytesToHex(encrypted);
    encryptedtext.setText(a);


    String desc[] = new String[]{"bytes ", " kilobytes", " megabytes", " gigabytes", "terabytes", "petabytes", "exabytes", "zettabytes", "yottabytes"};
    String s = plaintext.getText();
    double len = s.length();

    for (String d : desc) {
        size.setText(d + " : " + len);
        len /= 1024;

    }

https://codepen.io/anon/pen/NYzear

Answer 1

尝试在此处使用transform: skew()代替border，因为在边框技巧中，您需要在px中提供一个固定值，该内容高度无法响应< / p>

.wrapper {
  background-color: #16b629;
  width: 80%;
  position: relative;
  left: 20%;
}

.wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2bb629;
  transform: skew(-45deg);
  transform-origin: left top;
  z-index: -1;
}

.txt {
  padding: 10px 0;
  font-size: 21px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.27;
  letter-spacing: -0.2px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0.5px 0.9px 2px rgba(27, 29, 27, 0.94);
}

<div class="wrapper">
  <p class="text">bla blah some long text here blah blah</p>
</div>
<div class="wrapper">
  <p class="text">bla blah some long text here blah blah bla blah some long text here blah blah bla blah some long text here blah blah</p>
</div>
<div class="wrapper">
  <p class="text">bla blah some long text here blah blah bla blah some long text here blah blah bla blah some long text here blah blah bla blah some long text here blah blah bla blah some long text here blah blah bla blah some long text here blah blah</p>
</div>

Answer 2

这可以使用伪类来实现。这是更新的代码。

.btn {
  position: absolute;
  display: inline-block;
  height:50px; width:80%;
  text-align: center;
  color: white;
  background-color: red;
  line-height: 50px;
  text-decoration: none;
  margin-left:100px;
}
.btn:after {
  content: "";
  position: absolute;
  left: -70px;
  background-color:red;
  z-index:1;
  top:50px;
  width:50px;
  height:100px;
  transform-origin:0 0;
  transform: rotate(270deg) skewY(50deg);
}

<div class="btn">Text Here!</div>

JSFIDDLE Demo

希望我有。 谢谢。

Answer 3

简单的线性渐变并完成：

＆＃13;

＆＃13;

['string', 300, 'string']

＆＃13;

.box {
  padding:10px 10px 10px 50px;
  margin:20px;
  width:200px;
  color:#fff;
  background:
  linear-gradient(green,green)50px 0/100% 100% no-repeat,
  linear-gradient(to top left,green 50%,transparent 51%) 0 0/50px 100% no-repeat;
}

＆＃13;

＆＃13;

＆＃13;