Próbuję uzyskać dwa elementy div w celu dopasowania do pełnej szerokości strony, ale podzielone na pół z linią ukośną.dwie części div podzielone linią ukośną - CSS
W jaki sposób można to osiągnąć z dwóch DIV poprzez CSS? to jest na suwak i potrzebuje treści dodawane do każdej części po zakończeniu
Może to być coś takiego
przykładu 1
div {
min-height: 100px;
background: #D25A1E;
position: relative;
width: calc(50% - 30px);
}
.div1 {
float: left;
}
.div2 {
float: right;
}
.div1:after, .div2:before {
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
.div1:after {
left: 100%;
border-top: 100px solid #D25A1E;
border-right: 50px solid transparent;
}
.div2:before {
right: 100%;
border-bottom: 100px solid #D25A1E;
border-left: 50px solid transparent;
}<div class="div1"></div>
<div class="div2"></div>Przykład 2
div {
background: #D25A1E;
min-height: 100px;
width: calc(50% - 25px);
position: relative;
}
.div1 {
float: left;
}
.div2 {
float: right;
}
div:after {
position: absolute; top: 0px;
content:'';
z-index: -1;
height: 100%;
width: 50%;
background: #D25A1E;
}
.div1:after {
right: 0;
transform-origin: bottom right;
transform: skewX(-20deg);
}
.div2:after {
left: 0;
transform-origin: top left;
transform: skewX(-20deg);
}<div class="div1"></div>
<div class="div2"></div>Świetna odpowiedź. Właśnie robiłem coś podobnego. Jeśli zrobisz wszystkie wartości w 'em', automatycznie dostosuje się do rozmiaru czcionki - [** My Demo **] (http://codepen.io/Paulie-D/pen/WvJwpP) –
Czego spróbować tej pory? –
Powinieneś rzucić okiem na [tę odpowiedź] (http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive/30441123#30441123). Korzystając z kombinacji przykładów, w których jest nachylenie po lewej stronie i po prawej stronie, możesz osiągnąć to, czego potrzebujesz. Spróbuj zaktualizować pytanie, jeśli utkniesz w tym czasie. – Harry
https://jsfiddle.net/z5fogus5/ Po prostu potrzebuję podziału w środku, aby uzyskać przekątną. – 5kud