Question

有可能在CSS中做这样的思考吗？我的意思是，这句话： http://image.prntscr.com/image/54a38b236b954a16af9766747931ca61.png

Answer 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

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>

在CSS中倾斜多行

4 个答案: