Div with border and top/right, bottom/left transparent edges

Question

Does anybody knows how to code the border (upper right corner and lower left corner) of the box(image below)? Hope you can help me. Thanks in advance!

This is the 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>

This is the 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

It would be better to use box-shadow to create the above effect instead of pseudo-elements and borders. We would need two box shadows, one for the top and left areas and another (inset box shadow) for the right and bottom areas.

The thickness of the bordering areas can be adjusted by modifying the size of the box-shadows.

.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>