Question

现在我有一些这样的想法，但它不是很敏感的反应＆＃39;解。我有想法旋转边框 - 向左或向右但我不知道如何做到这一点 - 是否可以使用标准边框执行此操作？

这是实际解决方案：

＆＃13;

.slant-box .slant-box-content {
  display: inline-block;
  left: 50px;
  position: relative;
  top: -50px;
}
.slant-box:before {
  content: '';
  display: inline-block;
  height: 150px;
  transform: rotate(20deg);
  width: 2px;
  background: red;
}

＆＃13;

<div class="container">
  <div class="cta-content">
    <div class="row">
      <div class="col-md-12">
        <div class="slant-box">
          <div class="slant-box-content">
            <p class="text-uppercase">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            </p>
            <p>
              tempor incididcillum dolore eu fugiat nulla pariatur.
            </p>
          </div>
        </div>
        <!-- /.slant-box -->
      </div>
      <!-- /.col-md-8 col-md-offset-2 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.cta-content -->
</div>
<!-- /.container -->

＆＃13;

FIDDLE LINK

Answer 1

在下面的示例中，我使用伪元素定位绝对和添加的边框留下倾斜，以便它调整到父高度

.slant-box {
    .slant-box-content {
        display: inline-block;
        position: relative;
        padding:15px;
        margin:20px;
    }

    &:before {
        content: '';
        position:absolute;
        width:100%;
        height:100%;
        border-color: transparent transparent transparent red;
        border-style:solid;
        border-width:2px;
        transform: skewX(-15deg);
    }
}

https://jsfiddle.net/victor_007/7eLy1pmL/1/

CSS - 旋转边框 - 是否可能？

1 个答案: