html - 带边框和上/右、下/左透明边缘的 Div

Question

有谁知道如何对框(下图)的边框(右上角和左下角)进行编码？希望你能帮我。提前致谢!

这是HTML

<div class="carouselle">
   <div class="carousel-item">
       <div class="xx_b">
          <p>«  Lorem ipsum dolor sit amet, feugiat delicata liberavisse id   
           cum, no quo maiorum intellegebat, liber regione eu sit. 
            Mea cu case ludus integre, vide viderer eleifend ex mea. His ay 
            diceret, cum et atqui placerat... »</p>
        </div>
         <span class="t_author">Tom Cruz</span>
         <span class="t_occupation">Famous Movie Star</span>
      </div>
</div>

这是CSS

.carouselle .carousel-item .xx_b:after {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #eee transparent transparent;
  border-image: none;
  border-right: 10px solid transparent;
  border-style: solid;
  border-width: 10px;
  bottom: -20px;
  content: "";
  margin-left: -10px;
  position: absolute;
 }

.carouselle .carousel-item .xx_b {
  background: none repeat scroll 0 0 #eee;
  border: 15px solid #cccccc;
  box-sizing: border-box;
  float: left;
  height: 100%;
  margin-bottom: 30px;
  padding: 50px 150px;
  position: relative;
  width: 100%;
 }

Answer 1

最好使用box-shadow 来创建上述效果，而不是伪元素和边框。我们需要两个框阴影，一个用于顶部和左侧区域，另一个(inset 框阴影)用于右侧和底部区域。

边界区域的粗细可以通过修改框阴影的大小来调整。

.carouselle .carousel-item .xx_b {
  background: none repeat scroll 0 0 #eee;
  box-shadow: -15px -15px 0px #cccccc, inset -15px -15px 0px #cccccc;
  box-sizing: border-box;
  float: left;
  height: 100%;
  margin: 10px 0px 30px 10px;
  padding: 50px 150px;
  position: relative;
  width: 100%;
}

<div class="carouselle">
  <div class="carousel-item">
    <div class="xx_b">
      <p>« Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His ay diceret, cum et atqui placerat... »</p>
    </div>
    <span class="t_author">Tom Cruz</span>
    <span class="t_occupation">Famous Movie Star</span>
  </div>
</div>