CSS - 枠を回転させることは可能ですか？

今私はこのように思っていますが、それほど「反応が良い」解決策ではありません。私は境界線を回転させることを考えています - 左か右かですが、これを行う方法はわかりません - 標準的な境界でこれを行うことは可能でしょうか？ここCSS - 枠を回転させることは可能ですか？

は実際の解である：例で

.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

出典

2016-07-19 Paweł Farys

'：before'を使用すると何が問題になりますか？ –

@MohitBhardwaj私は常に自分のサイトのすべてのボックスに高さと最高値を設定する必要がある+私は応答するコードのために余分な値を設定する必要があります。 –

'：before'要素に' height：100％ 'を設定することができます。それがうまくいかない場合は、jquery/javascriptのスニペットを使用して、そのような '：before'要素の高さをコンテナに従って設定できます。それでも、枠線を回転させる必要がある場合は、コンテナ要素に変形スキューを適用するなどして境界線を回転させることができます。 'transform：skewX（10deg）;'コンテナの内容を歪ませるので、コンテナ内に別のdivを置く必要があります。つまり 'transform：skewX（-10deg）; –

iは絶対及び追加境界を配置することにより、擬似要素を使用している下には調整するようにスキューを残し親の高さへ

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

出典

2016-07-20 06:52:29

CSS - 枠を回転させることは可能ですか？

答えて

関連する問題