Versucht, ein schlampiges Rechteck ohne Clip-Pfad zu erstellen

Ich versuche, eine Box mit der oberen Grenze schief, die rechte Grenze schief nach links, die links nach rechts und die Unterseite sollte gerade bleiben. Es muß wie folgt aussehen: Versucht, ein schlampiges Rechteck ohne Clip-Pfad zu erstellen

ich dies mit einem Clip-Pfad erreichen könnte, aber ich Kompatibilität will für mehr Browser haben (wie älterer Browser, das heißt & Oper).

Ich dachte vielleicht mit Inline-SVG, aber ich denke, dass in SVG die Höhe angegeben werden muss und ich möchte, dass die Höhe der Box durch den Inhalt (dynamisch) definiert wird.

Quelle

2016-06-20 Rami

Bitte sehen Sie [hier] (http://stackoverflow.com/questions/36756081/css-skew-img-frame-without-distorting-image/36756497#36756497), wie ich denke, Sie finden genug in den Antworten zur Verfügung gestellt. –

Hier ist mein Versuch, Ihr Bild nachzuahmen.

JsFiddle

<!DOCTYPE HTML><html><head><meta charset="utf-8"> 
<title>Slanted Borders</title> 
<meta name="generator" content="PSPad editor, www.pspad.com"> 
<style> 
.slanted{ 
    display:block; 
    position:relative; 
    margin:50px auto; 
    padding:20px 20px 0; /* border space */ 
    width:600px; 
    overflow:hidden; 
} 
.slanted:before, 
.slanted:after, 
.slanted-top:before{ 
    position:absolute; 
    top:20px; 
    left:0; 
    border:solid transparent; 
    border-top-color:tan; 
    border-width:600px 0 0 20px; /* left border (top as max box height) */ 
    width:0; 
    height:0; 
    content:"\a0"; 
} 
.slanted:after{ 
    right:0; 
    left:auto; 
    border-width:600px 20px 0 0; /* right border (top as max box height) */ 
} 
.slanted-top:before{ 
    position:absolute; 
    top:0; 
    border-color:transparent; 
    border-left-color:tan; 
    border-width:20px 0 0 640px; /* top border width+padding (right as box length) */ 
} 
.slanted-top{ 
    padding:10px; 
    background:tan; /* background-color same as borders */ 
} 
.slanted p{ 
    margin:1em; 
} 
.slanted a{ 
    display:block; 
    margin:1em; 
} 
.slanted a:hover{ 
    height:20em; 
} 
</style> 
</head><body> 
  
<div class="slanted"> 
    <div class="slanted-top"> 
     <p>Slanted Borders</p> 
     <a href="#nogo">Hover to expand</a> 
    </div> 
</div> 
  
</body></html>

Quelle

2016-06-21 06:38:06

Danke! verbrachte Tage damit, herauszufinden, wie ich das erreichen konnte. – Rami

Versucht, ein schlampiges Rechteck ohne Clip-Pfad zu erstellen

Antwort

Verwandte Themen