Machen Sie eine bestimmte trapezförmige Form in reinem css

Angenommen, ich habe zwei Divs, als (schön) unten angezeigt. Ich habe mir schon The Shapes of CSS angesehen, aber ich habe nicht herausgefunden, wie genau die gelbe Form im unteren Bild gemacht werden könnte. Ist es möglich, die gelbe Form in ähnlicher Weise wie die im obigen Link beschriebenen zu machen.Machen Sie eine bestimmte trapezförmige Form in reinem css

Oder auch, jetzt sind wir schon beim Thema sind, würde beschreibt das Bild unter der idealen Situation. Ist dies in CSS möglich oder mit anderen Tools? (Beachten Sie, dass die Kurven in der Abbildung nicht ideal sind, aber vielleicht eine Standard Bezierkurve mit variierender Höhe arbeiten würde?)

Quelle

2016-10-16 konewka

Für den zweiten Teil der Frage, die Sie Pfade SVG-Clip erstellen können dann verweisen die ID in der CSS. Sie können die SVGs am Ende des HTML sehen.

-webkit-clip-path: url(#top-path); 
clip-path: url(#top-path);

Es gibt mehr Details über die beiden Methoden hier: https://css-tricks.com/clipping-masking-css/

Aber beachten Sie die Unterstützung für clip-path ist ganz im Moment begrenzt.

http://caniuse.com/#search=clip-path

div { 
 
    float: left; 
 
    height: 100px; 
 
    width: 130px; 
 
} 
 
.holder { 
 
    position: relative; 
 
} 
 
.top { 
 
    width: 490px; 
 
} 
 
.bottom { 
 
    width: 490px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 35px; 
 
} 
 
.top-left { 
 
    background-color: aquamarine; 
 
    height: 35px; 
 
} 
 
.top-mid { 
 
    background-color: aquamarine; 
 
    width: 97px; 
 
    -webkit-clip-path: url(#top-path); 
 
    clip-path: url(#top-path); 
 
} 
 
.top-right { 
 
    background-color: aquamarine; 
 
    margin-top: 37px; 
 
    height: 53px; 
 
} 
 
.bottom-left { 
 
    background-color: aqua; 
 
    height: 34px; 
 
} 
 
.bottom-mid { 
 
    background-color: aqua; 
 
    width: 97px; 
 
    -webkit-clip-path: url(#bottom-path); 
 
    clip-path: url(#bottom-path); 
 
} 
 
.bottom-right { 
 
    background-color: aqua; 
 
    margin-top: 55px; 
 
    height: 45px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>SVG Clip Path Shape</title> 
 
</head> 
 

 
<body> 
 
    <div class="holder"> 
 
    <div class="top"> 
 
     <div class="top-left"></div> 
 
     <div class="top-mid"></div> 
 
     <div class="top-right"></div> 
 
    </div> 
 
    <div class="bottom"> 
 
     <div class="bottom-left"></div> 
 
     <div class="bottom-mid"></div> 
 
     <div class="bottom-right"></div> 
 
    </div> 
 

 
    <svg width="0" height="0"> 
 
     <defs> 
 
     <clipPath id="bottom-path"> 
 
      <path d="M14.966,0.68L0,0v33.113l14.966,0.68c29.252,2.041,55.102,70.509,76.068,70.503l6.245-0.32V54.864 
 
\t l-6.245,0.32C70.068,55.189,44.218,2.721,14.966,0.68z" /> 
 
     </clipPath> 
 
     </defs> 
 
    </svg> 
 

 
    <svg width="0" height="0"> 
 
     <defs> 
 
     <clipPath id="top-path"> 
 
      <path fill="#E30613" d="M88.763,36.612C59.511,33.053,45.639,0,13.327,0C9.346,0,0,0,0,0v33.113v1.622l14.966,0.68 
 
\t c29.252,2.041,55.102,54.509,76.068,54.503l6.245-0.32V69.847V36.735L88.763,36.612z" /> 
 
     </clipPath> 
 
     </defs> 
 
    </svg> 
 
    </div> 
 
</body> 
 

 
</html>

Für einen der Frage Teil können wir clip-path jede der Eckenkoordinaten verwenden wird durch ein Komma getrennt.

-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); 
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);

div { 
 
    float: left; 
 
    height: 100px; 
 
    width: 130px; 
 
} 
 
.holder { 
 
    position: relative; 
 
} 
 
.top { 
 
    width: 490px; 
 
} 
 
.bottom { 
 
    width: 490px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 43px; 
 
} 
 
.top-left { 
 
    background-color: aquamarine; 
 
    height: 43px; 
 
} 
 
.top-mid { 
 
    background-color: aquamarine; 
 
    -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); 
 
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); 
 
} 
 
.top-right { 
 
    background-color: aquamarine; 
 
    margin-top: 20px; 
 
    height: 80px; 
 
} 
 
.bottom-left { 
 
    background-color: aqua; 
 
    height: 43px; 
 
} 
 
.bottom-mid { 
 
    background-color: aqua; 
 
    -webkit-clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%); 
 
    clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%); 
 
} 
 
.bottom-right { 
 
    background-color: aqua; 
 
    margin-top: 43px; 
 
    height: 57px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>CSS Shape</title> 
 
</head> 
 

 
<body> 
 
    <div class="holder"> 
 
    <div class="top"> 
 
     <div class="top-left"></div> 
 
     <div class="top-mid"></div> 
 
     <div class="top-right"></div> 
 
    </div> 
 
    <div class="bottom"> 
 
     <div class="bottom-left"></div> 
 
     <div class="bottom-mid"></div> 
 
     <div class="bottom-right"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-10-16 09:54:53 Sarcoma

auf einem Teil jetzt zwei Arbeiten kann ich eine andere Strategie benötigen. – Sarcoma

ist hier erste Form in reiner CSS. Sie müssen perspective verwenden.

.shape { 
 
    display: flex; 
 
    margin: 50px; 
 
} 
 
.red, 
 
.green { 
 
    color: white; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
} 
 
.green { 
 
    background: green; 
 
    position: relative; 
 
    z-index: 2; 
 
    width: 200px; 
 
    height: 127px; 
 
    margin-top: 45px; 
 
    margin-left: -22px; 
 
} 
 
.red { 
 
    width: 100px; 
 
    background: red; 
 
    height: 56px; 
 
    z-index: 2; 
 
} 
 
.parent { 
 
    position: relative; 
 
    -webkit-perspective: 711px; 
 
    perspective: 711px; 
 
    margin-left: -30px; 
 
    margin-top: 19px; 
 
} 
 
.el { 
 
    width: 200px; 
 
    -webkit-transform: rotateX(-27deg) rotateY(-40deg); 
 
    transform: rotateX(-27deg) rotateY(-40deg); 
 
    height: 65px; 
 
    background: #FFF200; 
 
    position: relative; 
 
    perspective: 350px; 
 
    -webkit-perspective: 350px; 
 
} 
 
.el:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    border-style: solid; 
 
    border-width: 0 200px 70px 0; 
 
    border-color: transparent #FFF200 transparent transparent; 
 
}

<div class="shape"> 
 
    <div class="red">Div 1</div> 
 
    <div class="parent"> 
 
    <div class="el"></div> 
 
    </div> 
 
    <div class="green">Div 2</div> 
 
</div>

Quelle

2016-10-16 09:56:57

Machen Sie eine bestimmte trapezförmige Form in reinem css

Antwort

Verwandte Themen