使用CSS在页面中包含文本的banderole

Question

我正试图在使用CSS的页面上创建一个banderole（我希望这是正确的词）。
我想要实现的目标：
理想情况下，banderole应该响应并包裹在某个元素中，这样我就可以在一个页面上放置多个这样的banderoles，一个在另一个下面。 我试图建立一个banderole但结果远远不是我想要的：

HTML：

<div class="section">
  <div class="banderole">
    <div class="banderole-content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

CSS：

  .banderole {
    width: 600px;
    height: 300px;
    background-color: green;
    position: absolute;
    top: 25px;
    left: 50px;
    text-align: center;
    color: #f0f0f0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .banderole-content {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .section {
    background-color: black;
  }

JSFiddle

是否可以在css中构建这样的banderole？

提前感谢您的帮助

Answer 1

您可以使用CSS转换的translate()和skew()属性。

查看下面的代码段（使用整页视图正确查看）：

＆＃13;

＆＃13;

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: green;
  position: relative;
}

.content-holder {
  position: absolute;
  background: #fff;
  width: 350px;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-20deg);
}

.text {
  position: absolute;
  width: 250px;
}

.top {
  top: 25%;
  left: 55%;
  transform: translate(-50%, -50%);
}

.bottom {
  top: 75%;
  left: 45%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="content-holder"></div>

<div class="text top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi molestiae repellat rerum quam quos incidunt, dolore delectus necessitatibus nobis, nesciunt dolorum odio, blanditiis minus iusto, ratione id. Est, sit, ut.</div>

<div class="text bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi molestiae repellat rerum quam quos incidunt, dolore delectus necessitatibus nobis, nesciunt dolorum odio, blanditiis minus iusto, ratione id. Est, sit, ut.</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

尝试transform: skew()方法：

＆＃13;

＆＃13;

.banderole {
  width: 100px;
  height: 100%;
  background-color: green;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  color: #f0f0f0;
  -webkit-transform: skew(-20deg, 0);
  -moz-transform: skew(-20deg, 0);
  -o-transform: skew(-20deg, 0);
  -ms-transform: skew(-20deg, 0);
  transform: skew(-20deg, 0);
}
.section {
  background-color: black;
}

＆＃13;

<div class="section">
  <div class="banderole">
    <div class="banderole-content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle