CODEWITHSUNDEEP
htmlcss
Vertisan
Vertisan

Reputation: 738

CSS - Rotate border - is it possible?

Now I have somethink like this, but it's not very 'responsive' solution. I have idea to rotate border - left or right but I don't know how to do this - is it possible to do this with standard border?

Here is actual solution: 

.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;
}
<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 -->

FIDDLE LINK

Upvotes: 2

Views: 21426

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

In example below i have used pseudo element by positioning absolute and added border left with skew so that it adjusts to the parent height

.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/

Upvotes: 1

Related Questions