Triangles positioned on the edges of a division element

Question

Triangles positioned on the edges of a division element

I am attempting to create a DIV with angled corners, as depicted in the image below:

https://i.sstatic.net/1a9LY.png

So far, I have successfully implemented the top right corner using a tutorial. Here is the code snippet that accomplishes this:

.lifeatblock {
background-color: #435973 !important;
position:relative;
}

.lifeatblock:after {
content: '';
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #fff transparent transparent;
width: 0;
height: 0;
right: 0;
top: 0;
position: absolute;
}

However, I have encountered difficulties in constructing the bottom left corner using :before. If anyone has insights on how to achieve this, I would greatly appreciate it. Thank you!

css

Answer 1

Answer №1

One way to achieve this is by using a pseudo element:

*{
  margin:0;
  padding:0;
}
.box{
  background-color:blue;
  width:400px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
.box:before, .box:after{
        content:"";
        position:absolute;
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 30px solid white;
    }
 .box:before{
   transform:rotate(-135deg);
     left:-20px;
   bottom:-12.5px;
} .box:after{
   transform:rotate(45deg);
     right:-20px;
   top:-12.5px;
}

<div class="box"></div>

Answer 2

One way to achieve this is by using a pseudo element:

*{
  margin:0;
  padding:0;
}
.box{
  background-color:blue;
  width:400px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
.box:before, .box:after{
        content:"";
        position:absolute;
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 30px solid white;
    }
 .box:before{
   transform:rotate(-135deg);
     left:-20px;
   bottom:-12.5px;
} .box:after{
   transform:rotate(45deg);
     right:-20px;
   top:-12.5px;
}

<div class="box"></div>

Triangles positioned on the edges of a division element

Answer №1

Similar questions

Tips for stopping the web page from moving due to scrollbar placement?

Aligning CSS Divs with Changing Content

Ways to center an image without relying on margin or padding to achieve alignment

Switching up the default font style within TinyMCE

Not all Angular Material2 styles are being fully applied

I encountered an issue where I am unable to subtract from jQuery's .outerHeight() within an if statement

Creating dynamic height based on width using JavaScript

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

bring in all the files located within the Directory

Maintain the flow of a floated or absolutely positioned element using CSS

What are the steps to add a background image in Chrome?

What is preventing this DIV from stretching to the full width of its children?

The hide and show buttons seem to be missing when utilizing the datatable API

Is it possible to conceal or disregard text elements from the web browser search function by using CTRL+F?

Issue encountered while trying to modify the color of a placeholder

Pushing down menu items in a dropdown CSS navigation bar

The menu in IE7 seems to have a mind of its own, appearing and

Deactivate the image button when no image has been chosen from the input field

How can I save the complete CSS file using Firebug FireDiff?

Why is it that code that appears identical in the same browser and same size can look different when one version is deployed on localhost and the other remotely?