Stwórz określony kształt trapezu w czystym css

Załóżmy, że mam dwa elementy div, co (pięknie) pokazano poniżej. Już spojrzałem na The Shapes of CSS, ale nie udało mi się ustalić, jak mógłby wyglądać żółty kształt na poniższym obrazku. Czy możliwe jest wykonanie żółtego kształtu w sposób podobny do opisanego w powyższym łączu.Stwórz określony kształt trapezu w czystym css

Albo nawet, teraz jesteśmy w tej sprawie, zdjęcie poniżej by opisać idealną sytuację. Czy jest to możliwe w css lub przy użyciu innych narzędzi? (Zauważ, że krzywe na zdjęciu nie są idealne, ale może standardową krzywą Beziera z różną wysokość będzie działać?)

Źródło

2016-10-16 konewka

Na drugą część pytania można utworzyć ścieżki obcinania SVG następnie odwołać identyfikator w css. Możesz zobaczyć SVG na dole HTML.

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

Są tu więcej szczegółów na temat obu metod: https://css-tricks.com/clipping-masking-css/

Ale należy pamiętać, wsparcie dla clip-path jest dość ograniczona w tej chwili.

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>

Na pierwszej części kwestii można wykorzystać clip-path każdym rogu współrzędnych oddzielony przecinkami.

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

Źródło

2016-10-16 09:54:53 Sarcoma

Praca na drugiej części teraz, może muszę inną strategię. – Sarcoma

Oto pierwszy kształt w czystym CSS. Musisz użyć perspective.

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

Źródło

2016-10-16 09:56:57

Stwórz określony kształt trapezu w czystym css

Odpowiedz

Powiązane problemy