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%;
 }
htmlcssbordercss-shapes

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 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 №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 №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 №5

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Assign a variable name to the ng-model using JavaScript

Is there a way to dynamically set the ng-model name using JavaScript? HTML <div ng-repeat="model in models"> <input ng-model="?"> </div JS $scope.models= [ {name: "modelOne"}, {name: "modelTwo"}, {name: "modelThree"} ]; Any ...

javascripthtmlangularjs

In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

I am facing an issue with a div containing form elements and an invisible overlay mask. When using IE 7 and 8, the click goes through the overlay without background which is incorrect. To solve this problem, I added a background color to the overlay div w ...

jquerycssinternet-explorer-8internet-explorer-7overlay

Modifying the HTML attribute value (of input) does not impact the value property

After inputting a single tag, I ran the following code in my Chrome console: https://i.stack.imgur.com/ySErA.jpg The result was unexpected for me. According to what I have read in a book, when I change an HTML attribute, the corresponding property should ...

javascripthtmlgoogle-chromeattributes

Decoding JavaScript content with Python

Currently, I am dissecting this specific portion of HTML <script type="text/javascript"> var spConfig = new Product.Config({"attributes":{"150":{"id":"150","code":"size_shoe","label":"Schuhgr\u00f6\u00dfe","options":[{"id":"494","label ...

javascriptpythonhtmlparsingbeautifulsoup

What are the steps for implementing timezone-js?

I found a project on GitHub that claims to convert one timezone to another. I've been trying to get it to work without success. After downloading and extracting the files, I created an HTML file with the following code: <html xmlns="http://www.w3. ...

javascripthtml

Challenges with jQuery: Appending strings to a dynamically selected element

Hello everyone, I have a question regarding adding the string 'url(" ")' around my Any assistance you can provide would be greatly appreciated. Thank you! $(function() { $('#list li a').hover( function(){ $("#meow").css( " ...

javascriptjqueryhtmlcss

What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

I created a navigation menu using HTML and SCSS, but I'm facing an issue where the menu does not close when clicking on links inside it. The menu continues to overlay the content on the page instead of closing. Essentially, I want the navigation menu ...

htmlcssonclicknavigation

Hidden Document Scroll Offset

When CSS is used to hide scrollbar html, body { width: 100%; overflow-x: hidden } The above code snippet removes the scroll from the window but triggers it on the body element. To calculate the scroll values in such cases, you can use: pageOffset = ...

javascriptcssdom

Can styles be universally applied to specific elements or classes on a webpage by using hover on a single selector?

Is it possible, using only CSS and no JavaScript, to apply styles to specific elements or classes throughout an entire webpage without restrictions such as descendants or siblings, by hovering over a particular selector? For instance, I would like to remo ...

htmlcsscss-selectorshoverpseudo-class

Ways to incorporate a while loop into a randomizing function

I've been diving into JavaScript and managed to create a website that displays random gifs when clicked from an array. Now, my goal is to implement a while loop to prevent duplicate images from being shown consecutively. However, I seem to be facing ...

javascriptjqueryhtmlcss

Building applications with Vue.js and Framework7 while incorporating the powerful Axios library

I am inexperienced with framework7 and vuejs. Can someone confirm if I am importing it correctly? Additionally, how can I make axios accessible from other pages? Here is my main.js file. I’m uncertain if the import process is accurate or if any steps ar ...

htmlvue.jsaxioshtml-framework-7

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

I am struggling with positioning the following div on my webpage. .div { width:100%; padding-bottom:20%; background-color:blue; } <div class="div"></div> I have been searching for a solution to vertically center this responsive div on my web ...

javascriptjqueryhtmlcss

What is the best method for implementing border-radius on select2 elements?

I previously had a default bootstrap user select box with a border-radius style applied: <div class="container"> <select class="form-control" style="border-radius: 1rem;"> <option value="1">Us ...

htmljquerycssbootstrap-4jquery-select2

Switching to a dropdown navigation option

Sorry for the repetition, but I haven't been able to find a solution to my problem yet, so here I am asking again. I am still getting the hang of html5 and css3, and while I've managed so far, I'm stuck now. I want to turn one of the option ...

htmlcssdrop-down-menu

The background image is cropped at both the top and bottom edges

Check out this JSFiddle link: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. The code seems to be running fine, but I'm facing an issue where the image is being slightly cut off at the top and bottom for some reason. -webkit-background-size: cover; Can an ...

htmlcssimage

As the browser window is resized, the HTML div is causing the image to be clipped

Having an issue with the dynamic resizing of Divs containing Images in my HTML Table. The Challenge: The Image within a resizable Div gets clipped at the bottom when the height decreases due to window resizing. To view the problem, visit this Example Pag ...

htmlcssweb

Ensuring Contact Form Accuracy with Jquery Validation

I am trying to implement form validation using jQuery. Here is the code I am using: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2 /jquery.min.js"></script> <script type="text/javascript" src=" http:// ...

jqueryhtmljquery-validatevalidation

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

I recently incorporated jquery Galleria into my website and I am currently facing an alignment issue with the div element gallery-container. Interestingly, it appears correctly aligned in Chrome but is shifted to the right in Firefox. You can view the webs ...

jqueryhtmlcssjavascriptgalleria

Provide users with the option to select a specific destination for saving their file

In the midst of my spring MVC project, I find myself in need of implementing a file path chooser for users. The goal is to allow users to select a specific location where they can save their files, such as C:\testlocation\sublocation... Despite r ...

javascripthtmljspspring-mvcdownload

After applying sorting, jqGrid displays an empty space below the final row

Having an unusual problem with sorting in the jqGrid. When I sort in descending order, there is extra space below the last row, but when I sort in ascending order, the table ends abruptly at the bottom without allowing any further scrolling. I have includ ...

c#jqueryhtmlsortingjqgrid