CSS - Grenze drehen - ist das möglich?

Jetzt habe ich etwas wie dieses, aber es ist nicht sehr "reaktionsschnelle" Lösung. Ich habe eine Idee, um die Grenze zu drehen - links oder rechts, aber ich weiß nicht, wie das geht - ist es möglich, dies mit Standard-Rand zu tun? HierCSS - Grenze drehen - ist das möglich?

ist tatsächliche Lösung:

.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

Quelle

2016-07-19 Paweł Farys

Was ist falsch an der Verwendung von ': before'? –

@MohitBhardwaj Da ich immer die Höhe und den oberen Wert für jede Box auf meiner Site einstellen muss, muss ich extra Werte für den reaktionsfähigen Code einstellen. –

Sie können 'height: 100%' auf Ihre ': before' Elemente setzen. Wenn das nicht funktioniert, können Sie ein kleines Snippet von jquery/javascript verwenden, das die Höhe aller solchen ': before' Elemente entsprechend ihren Containern festlegt. Wenn Sie jedoch den Rand drehen müssen, können Sie dies tun, indem Sie den Transformationsschräglauf auf Ihr Containerelement anwenden, z. 'transform: skewX (10deg);'. Da dies auch den Inhalt des Containers verfälschen wird, müssen Sie ein anderes div im Container haben, das Sie zurückdrehen können, zB 'transform: skewX (-10deg);' –

Im Beispiel unten i Pseudo-Element verwendet werde von absoluter Positionierung und hinzugekommen skew Grenze links, so daß es justiert zur übergeordneten Höhe

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

Quelle

2016-07-20 06:52:29

CSS - Grenze drehen - ist das möglich?

Antwort

Verwandte Themen