Question

有人可以通过解释我如何在一个带有CSS的盒子上实现这种锯齿状边缘来提供帮助吗？ Click here for the mockup image。我能够创建分层文本框，但不能创建连续看起来框，其中笔划是锯齿状的。谢谢！

我的代码在这里：

  .bgtextcolor {
    position: relative;
    background-color: purple;
  }

  .trPic{ 
    position:relative;
    width:320px; 
    height:240px; 
    background: #ffffff; 
    border: 2px solid #000000; 
    padding-left: 5px;
    top: 50px;
   }       
  .pbox{
    padding-left: 5px;

  }      
  .trPic .redO{ 
    position:relative; 
    top: -10px; 
    width: 325px; 
    height: 240px; 
    background:#ffffff; 
    opacity:0;
   border: 2px solid #000000;
  }       
  .trPic
  .redO { opacity:1; } 
</style>

<div class="trPic"> 
  <div class="redO">
       <div class="pbox">
    <p> this is the text sdjfl sdfklj sdfklj sdfjlsdfjlsd lkjsdlfjsd lkjsdflkjsdf sdklfj sdfj lsdfkl sf lksjdf lkjsdf
    sdfsd
    </p>
     </div>
    </div>
  </div> 
</div>

Answer 1

在box div上使用：before和：after伪类可能更简单，并使用交错效果创建背景图像/精灵。这些方面的东西：

.pbox {
  border-left: 2px solid #333;
  border-right: 2px solid #333;
  max-width:300px;
}

.pbox:before {
  content: " ";
  height: 20px;
  background-color: #ff0000;
  display: block;
  width: calc(100% + 4px);
  position: relative;
  left: -2px;
}

.pbox:after {
  content: " ";
  height: 20px;
  background-color: #ff0000;
  display: block;
  width: calc(100% + 4px);
  position: relative;
  left: -2px;
}

Codepen：https://codepen.io/mediacrisis/pen/eWVNOy

只需用交错的像素背景图像替换红色背景颜色。

使用CSS为包装盒创建锯齿状边缘

1 个答案: