CSS에서 여러 줄을 기울임

Question

CSS에서 이와 같은 일을 할 수 있습니까? 나는이 선 의미 : http://image.prntscr.com/image/54a38b236b954a16af9766747931ca61.png

Answer 1

내가 정확히 질문에 대답 아니지만, 당신이 더 나은 선택이 될 SVG을 찾을 수 있습니다 죄송합니다; 그것은 이런 종류의 물건을 위해 만들어졌고 죽기 쉽습니다.

<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는 다음과 같이이다 :

부모 DIV를 커버하는 배경으로 SVG를 설정하려면 ...

마크 업이 같다

.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

Answer 2

예이, 을 할 수 있지만, 이것이 가장 좋은 방법

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

Answer 3

없는 시도이 :

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

Answer 4

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>