Html 带边框和上/右、下/左透明边的Div

有人知道如何对框（下图）的边框（右上角和左下角）进行编码吗？ 希望你能帮助我。 提前谢谢！

这是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>

---

为了获得这种效果，我们可以将

边框

与

框阴影

相结合。

边框

属性将用于其中两个边框（顶部和右侧或左侧，或底部和右侧或左侧），而

框阴影

将用于其他两个边框

最后，我们需要在边上引入一个边距，该边距的阴影会偏移元素的宽度，因为

框阴影

不会影响元素的宽度

div{
边框顶部：15px实心#中交；
右边框：15px实心#中交；
盒影：15px 15px 0 1px#CCCC；
利润率：0 15px 15px 0；
}

最终结果

演示

div{
背景：#eee；
高度：100px；
边框顶部：15px实心#中交；
左边框：15px实心#中交；
盒影：15px 15px 0 1px#CCCC；
利润率：0 15px 15px 0；
}

---

最好使用

框阴影

来创建上述效果，而不是伪元素和边框。我们需要两个框阴影，一个用于顶部和左侧区域，另一个（

inset

box shadow）用于右侧和底部区域

可以通过修改长方体阴影的大小来调整边界区域的厚度

.carouselle.carousel项目.xx\b{
背景：无重复滚动0 0#eee；
盒影：-15px-15px 0px#cccccc，插图-15px-15px 0px#cccccc；
框大小：边框框；
浮动：左；
身高：100%；
利润率：10px 0px 30px 10px；
填充：50px 150px；
位置：相对位置；
宽度：100%；
}

«Lorem ipsum door sit amet，自由主义者的封建主义者，没有知识产权，欧盟自由区。如果是ludus整数，请参阅viderer eleifend ex Mea。他的名字是dicret，cum et atqui placerat。。。»

汤姆·克鲁兹
著名影星

.container{
宽度：600px；
}
p{
背景：#a1a1；
填充：25px；
字体大小：12px；
盒影：-5px-5px 0px#ccc，插图-5px-5px 0px#ccc；
颜色：#fff；
}

«Lorem ipsum door sit amet，封建的自由主义者id
嗯，没有什么知识，自由的欧盟席位。
如果是ludus整数，请参阅viderer eleifend ex Mea。他说
迪克雷特，库姆和阿特奎。。。»

这里是另一种使用两个叠加伪元素作为背景的方法。在以下示例中，“边界”是响应的：

p{
位置：相对位置；
宽度：80%；
保证金：50px自动；
填充：4%；
文本对齐：居中；颜色：#fff；
}
p:之前，p:之后{
内容：''；
位置：绝对位置；
顶部：0；左侧：0；
宽度：100%；高度：100%；
背景：灰色；
不透明度：0.5；
z指数：-1；
}
p:以前{
利润率：-0.5%0-0.5%；
}
p:之后{
利润率：0.5%0.5%；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一对共同的利古拉人，他们是来自nec的威尼斯人。门颞前庭。

在我看来，这更像是一个

盒子阴影。您确定它应该是一个
边框
？使用方框阴影+边框来获得所需的边框effect@AlyssaReyes：很高兴能帮上忙，伙计：）
.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%;
 }