Можно ли как-то сделать это в CSS? Я имею в виду, эти строки: http://image.prntscr.com/image/54a38b236b954a16af9766747931ca61.pngНаклон нескольких строк в CSS
ответ
К сожалению, я не отвечаю на ваш вопрос точно, но вы могли бы найти 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;
}
Ницца! Можно ли установить это на фоне? Мне нужно вставить какой-то текст в этот DIV –
Да, я просто добавил текст https://jsbin.com/zokedi/5/edit?html,css,output –
Да, вы можете сделать это, , но это не лучшая практика
.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>
Попробуйте это:
<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>
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>
Почему вы не берете изображение или svg? –
@ IsmailFarooq Я могу использовать изображение с этими строками (я не знаю, как это сделать в SVG), но можно ли накрывать DIV? –
можно, но div сделать его более сложным –