2016-07-18 4 views
0

Можно ли как-то сделать это в CSS? Я имею в виду, эти строки: http://image.prntscr.com/image/54a38b236b954a16af9766747931ca61.pngНаклон нескольких строк в CSS

+0

Почему вы не берете изображение или svg? –

+0

@ IsmailFarooq Я могу использовать изображение с этими строками (я не знаю, как это сделать в SVG), но можно ли накрывать DIV? –

+0

можно, но div сделать его более сложным –

ответ

1

К сожалению, я не отвечаю на ваш вопрос точно, но вы могли бы найти SVG быть лучшим выбором; он создан для такого рода вещей и с ним легко работать.

Чтобы установить SVG в качестве фона, который охватывает родительский DIV ...

Разметка, как это:

<div class="background"> 
    <svg> 
    <line x1="60%" y1="0" x2="40%" y2="100%" /> 
    <line x1="70%" y1="0" x2="50%" y2="100%" /> 
    <line x1="80%" y1="0" x2="60%" y2="100%" /> 
    <line x1="90%" y1="0" x2="70%" y2="100%" /> 
    <line x1="100%" y1="0" x2="80%" y2="100%" /> 
    <line x1="110%" y1="0" x2="90%" y2="100%" /> 
    </svg> 
</div> 

И CSS, как это:

.background { 
    position: relative; 
    width: 300px; 
    height: 400px; 
    border: 2px dashed black; 
} 
svg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: #d7322c; 
} 
line { 
    stroke-width: 2; 
    stroke: #dc4e49; 
} 

https://jsbin.com/zokedi/4/edit?html,css,output

+0

Ницца! Можно ли установить это на фоне? Мне нужно вставить какой-то текст в этот DIV –

+0

Да, я просто добавил текст https://jsbin.com/zokedi/5/edit?html,css,output –

0

Да, вы можете сделать это, , но это не лучшая практика

.ul-wrapper{ 
 
    float: right; 
 
    margin: 0; 
 
    background: red; 
 
    width:100%; 
 
    } 
 
li { 
 
    list-style-type: none; 
 
    border-bottom: 1px solid rgba(255,255,255,0.5); 
 
    line-height: 20px; 
 
    height: 23px; 
 
    transform: rotate(33deg); 
 
}
<ul class="ul-wrapper"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    </ul>

0

Попробуйте это:

<style> 
    .parent { 
     height: 500px; 
     width: 400px; 
     background-color: red; 
     overflow: hidden; 
    } 
    .child { 
     background-color: transparent; 
     height: 200px; 
     width: 600px; 
     float: right; 
     margin-top: 100px; 
     -ms-transform: rotate(80deg);/* IE 9 */ 
     -webkit-transform: rotate(80deg);/* Chrome, Safari, Opera */ 
     transform: rotate(-60deg); 
    } 
    .line { 
     height: 25px; 
     display: block; 
     border-bottom: 1px solid white; 
    } 
</style> 

HTML

<div class="parent"> 
    <div class="child"> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
    </div> 
</div> 
0

html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.box { 
 
    background: #d7322c; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
.box:after { 
 
    background: repeating-linear-gradient(to right, transparent, transparent 21px, #e2716d 21px, #e2716d 22px); 
 
    transform: skewX(-5deg); 
 
    position: absolute; 
 
    content: ''; 
 
    left: 120px; 
 
    z-index: 10; 
 
    bottom: 0; 
 
    right: 0; 
 
    top: 0; 
 
}
<div class="box"></div>