Я пытаюсь установить два треугольника следующим образом:создать адаптивный треугольник
Два треугольника должны идти от середины к внешней стороне браузера. Я попытался настроить его с помощью обертки и фонового цвета, а затем повернуть обертку, но я не могу ее воспринять. Код я попытался было:
#page-header-wrapper-triangle {
background-color:#e14b41 ;
-webkit-transform: rotate(-12deg) translate3d(0, 0, 0);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
transform: rotate(-12deg);
margin: 0 -21px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
position: relative;
min-height: 204px;
z-index:1000;
width:80%;
}
#page-header-wrapper-triangle-2 {
background-color:#e14b41 ;
-webkit-transform: rotate(12deg) translate3d(0, 0, 0);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
transform: rotate(12deg);
margin: 0 -54px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
position: relative;
min-height: 204px;
z-index:1000;
width:80%;
float:right;
top:-520px;
}
<div id="page-header-wrapper-triangle">
\t <div class="container">
<div class="row">
\t <div class="right-red col-xs-12 col-sm-6">
\t
</div>
<div class="left-blue col-xs-12 col-sm-6">
</div>
\t \t </div>
\t </div>
</div>
<div id="page-header-wrapper-triangle-2">
\t <div class="container">
<div class="row">
\t <div class="right-red col-xs-12 col-sm-6">
\t
</div>
<div class="left-blue col-xs-12 col-sm-6">
</div>
\t \t </div>
\t </div>
</div>
Это работает, когда ширина браузера 1920 точек, а S только изменить ширину она не работает. Я понятия не имею, как я могу реагировать.
Я также пробовал его с фоновыми изображениями. Но это тоже не работает.
почему ваш вопрос имеет рк p-tag – Blueblazer172
где находится php? –