Как сделать диагональ div

Я пытаюсь сделать диагональный div, поэтому я мог бы создать эту форму: Я использую сетку бутстрапа, и я уже сделал три контейнера для формы.Как сделать диагональ div

Он будет изготовлен из 3 частей, 2 из которых диагональ, а один - прямой. Я сделал 3 части. но я не знаю, как сделать его диагональным.

example in codepen

HTML:

<body ng-app="appt" ng-controller="AppController" > 
    <div class="row test-row"> 
     <div class="col-lg-4 test-outbox"> 
      <div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1"> 
       <span class="test-s"></span> 
       <span class="test-s"></span> 
       <div class="test-d"></div> 
      </div> 
     </div> 
     <div class="col-lg-4 test-outbox"> 
      <div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1"> 
      </div> 
     </div> 
     <div class="col-lg-4 test-outbox"> 
      <div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1"></div> 
     </div> 
    </div> 
</body>

CSS:

.test-row{ 
    width: 100%; 
    margin-right: 0; 
    margin-left: 0; 
    position: fixed; 
    top: 100px; 
} 

.test-outbox{ 
    border:1px black solid; 
    height:350px; 
} 

.test-inbox-center { 
    height: 300px;   /*your login box height*/ 
    position: absolute; 
    top: 50%; 
    margin-top: -150px; /*height/2*/ 
    border:1px black solid; 
    border-radius: 3px; 
    background-color:white; 
    padding: 0; 
} 
.test-s:nth-child(even){ 
    height: 100px; 
    width: 76px; 
    top: 150px; 
    position: absolute; 
    border:1px black solid; 
    right: 0; 
} 
.test-s:nth-child(odd){ 
    height: 100px; 
    width: 76px; 
    top: 150px; 
    position: absolute; 
    border:1px black solid; 
    left: 0; 
} 
.test-d{ 

}

источник

2015-12-05 Ariel Livshits

Пожалуйста, проверьте этот fiddle.

здесь код

HTML

<div class="mainOuterDiv"> 
     <div class="middDiv"> 
      <div class="innerLeft"></div> 
      <div class="innerRight"></div> 
      <div class="textDiv"></div> 
     </div> 
    </div>

CSS

.mainOuterDiv{ 
    width:200px; 
    height:200px; 
    border:solid 2px #0CF; 
    overflow:hidden; 
    background:#FFF; 
} 
.middDiv{ 
    width:70%; 
    height:30px; 
    border:solid 2px #0CF; 
    margin:0px auto; 
    position:relative; 
    margin-top:50%; 
} 
.innerLeft{ 
    position: absolute; 
    left: -32px; 
    top: -13px; 
    border: solid 2px #0CF; 
    width:20%; 
    height:100%;  
    z-index: 1; 
    transform: skew(180deg,215deg); 
} 
.innerRight{ 
    position:absolute; 
    border:solid 2px #0CF; 
    right:-32px; 
    top: -13px; 
    width:20%; 
    height:100%; 
    z-index: 1; 
    transform: skew(180deg,145deg); 
} 
.textDiv{ 
    background:#fff; 
    z-index:9999; 
    width:100%; 
    height:100%; 
    position:absolute; 
}

Благодаря

источник

2015-12-05 11:30:58

он не работает хорошо в моей сети, у вас есть какой-то более общий способ для этого? он должен быть во многих размерах и не только один –

Можете ли вы поделиться выпуском? –

В каком размере вы хотите ??? –

Как сделать диагональ div

ответ

Смежные вопросы