A div element featuring a border with transparent edges on the top right and bottom left corners

Question

A div element featuring a border with transparent edges on the top right and bottom left corners

Does anyone know how to code the border for the upper right corner and lower left corner of the box (as shown in the image below)? I would really appreciate some help. Thank you 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%;
 }

html css border css-shapes

Answer 1

Answer №1

To achieve the desired effect, it is recommended to utilize the box-shadow property instead of pseudo-elements and borders. Utilizing two box shadows, one for the top and left sections and an inset box shadow for the right and bottom sections would be ideal.

The thickness of the border areas can be customized by adjusting the size of the box-shadows accordingly.

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

Answer 2

To achieve the desired effect, it is recommended to utilize the box-shadow property instead of pseudo-elements and borders. Utilizing two box shadows, one for the top and left sections and an inset box shadow for the right and bottom sections would be ideal.

The thickness of the border areas can be customized by adjusting the size of the box-shadows accordingly.

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

Answer 3

Answer №2

To achieve this visual effect, we can combine the properties of border and box-shadow. The border attribute will be applied to two borders (top and right or left, or bottom and right or left), while the box-shadow property will be used for the other two borders.

Additionally, we will need to add a margin on the edges with the shadow to compensate for the element's width, as the box-shadow does not affect the overall width of the element.

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

Final Outcome

Live Example

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>

Answer 4

To achieve this visual effect, we can combine the properties of border and box-shadow. The border attribute will be applied to two borders (top and right or left, or bottom and right or left), while the box-shadow property will be used for the other two borders.

Additionally, we will need to add a margin on the edges with the shadow to compensate for the element's width, as the box-shadow does not affect the overall width of the element.

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

Final Outcome

Live Example

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>

Answer 5

Answer №3

Here is an alternative method using two overlayed pseudo elements for the background. In this example, the "borders" are designed to be responsive:

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>

As suggested by jbutler483, a similar result can be achieved with a single pseudo element and utilizing rgba() colors for the background transparency :

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>

Answer 6

Here is an alternative method using two overlayed pseudo elements for the background. In this example, the "borders" are designed to be responsive:

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>

As suggested by jbutler483, a similar result can be achieved with a single pseudo element and utilizing rgba() colors for the background transparency :

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>

Answer 7

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>

Answer 8

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

Answer 9

Answer №5

div {
  background: #f0f0f0;
  height: 120px; 
  box-shadow: 8px 8px 0px 8px #dddddd, -8px -8px 0 8px #dddddd;
  margin: 20px;
}

<div></div>

Answer 10

div {
  background: #f0f0f0;
  height: 120px; 
  box-shadow: 8px 8px 0px 8px #dddddd, -8px -8px 0 8px #dddddd;
  margin: 20px;
}

<div></div>

A div element featuring a border with transparent edges on the top right and bottom left corners

Answer №1

Answer №2

Final Outcome

Live Example

Answer №3

Answer №4

Answer №5

Similar questions

Laravel error message for unresolved symbolic link

What's the method for positioning the footer at the bottom of the grid without impacting the layout of the other rows?

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

How tall can an image be to load successfully on an iPad website?

What is the best way to apply a hover rule to a CSS class in order to change the color of a specific row when hovering in

What is the best method for deleting scripts to optimize for mobile responsiveness?

Table header containing the weekdays for a jQuery calendar display

What steps can I take to decrease the padding of this footer?

Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Steps to create a zigzagging line connecting two elements

Error in Angular 2: The app.component.html file triggered an exception at line 1, character 108 due to excessive recursion

Adjusting SVG size based on the position of the cursor for transforming origin

Set boundaries for the width and height of an image in the input field

Achieving vertical center alignment for the label and btn-group in Bootstrap

Applying a dynamic translate3d transformation on the ::after element using CSS3

The HTML checkbox remains unchanged even after the form is submitted

Scrolling to an id within dynamically loaded content using jQuery after an ajax request

An error occurs when attempting to assign a value to a MUI file TextField

Using SCSS to apply a class in Next.js