带有边框和顶部/右侧、底部/左侧透明边缘的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%;
 }

- Alyssa Reyes

---

这看起来更像是一个 box-shadow。你确定它应该是一个 border 吗？ - icke

使用box-shadow和border来获得所需的效果。 - Ajey

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>

- Harry

---

@AlyssaReyes：很高兴能帮上你，伙计 :) - Harry

Answer 2

为了实现这个效果，我们可以将border和box-shadow结合使用。 border属性将用于两条边框（顶部和右侧或左侧，或底部和右侧或左侧），而box-shadow将用于另外两条边框。

最后，我们需要在具有阴影的边缘引入一个外边距来偏移元素的宽度，因为box-shadow不会对元素的宽度产生影响。

div {
    border-top: 15px solid #cccccc;
    border-right: 15px solid #cccccc;
    box-shadow: 15px 15px 0 1px #cccccc;
    margin: 0 15px 15px 0;
}

最终结果

演示

div {
  background: #eee;
  height: 100px;
  
  border-top: 15px solid #cccccc;
  border-left: 15px solid #cccccc;
  
  box-shadow: 15px 15px 0 1px #cccccc;
  
  margin: 0 15px 15px 0;
}

<div></div>

- James Donnelly

Answer 3

这里是另一种使用两个重叠伪元素作为背景的方法。在下面的示例中，“边框”是响应式的:

p {
  position: relative;
  width: 80%;
  margin: 50px auto;
  padding: 4%;
  text-align: center; color: #fff;
}
p:before,p:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: grey;
  opacity: 0.5;
  z-index: -1;
}
p:before {
  margin: -0.5% 0 0 -0.5%;
}
p:after {
  margin: 0.5% 0 0 0.5%;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices commodo ligula, sed venenatis metus sollicitudin nec. Maecenas vestibulum porttitor tempus.
</p>

正如jbutler483所评论的那样，可以使用一个伪元素和rgba()颜色来实现相同的输出效果，以实现背景透明度：

p{
    width:80%;
    margin:50px auto;
    padding:5% 4% 4% 5%;
    position:relative;
    text-align:center;
    color:#fff;
    background: rgba(0, 0, 0, 0.2);
}
p:before{
    content:'';
    position:absolute;
    background:inherit;
    width:100%; height:100%;
    left:0; top:0;
    margin: 1% 0 0 1%;
    z-index:-1;
}

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices commodo ligula, sed venenatis metus sollicitudin nec. Maecenas vestibulum porttitor tempus.
</p>

- web-tiki

Answer 4

.container {
    width:600px;    
}
p {
    background: #A1A1A1;
    padding:25px;
    font-size:12px;
    box-shadow: -5px -5px 0px #ccc, inset -5px -5px 0px #ccc;
    color:#fff;
}

<div class="container">
    <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>

- makeitmorehuman

Answer 5

div {
  background: #eee;
  height: 100px; 
  box-shadow: 7px 7px 0px 7px #cccccc, -7px -7px 0 7px #cccccc;
  margin: 15px;
}

<div></div>

- Prajeesh K P