Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to achieve chamfered CSS Border Corners rather than rounded corners?

With the CSS border-radius property I can have a curvy, rounded border corner at the end.

.boxLeft{
    border-right: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 10px 0;
}

.boxRight{
    border-left: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 0 10px;
}

But I want a border corner like the image below. If I have two boxes (Yellow & Pink) meeting each other and I want a harsh corner at the bottom meeting point (dotted corner), what should I do?

enter image description here

Is that possible using CSS?

like image 420
Mayeenul Islam Avatar asked Feb 08 '13 10:02

Mayeenul Islam


People also ask

How do you make a fancy inverted border radius in CSS?

The trick to making the inverted border radius (at least using this method) is to create a pseudo element, and then cut a normal border radius out of that element. Let's set up the pseudo element, and let's at the same time already add the border radius to it to speed life up a little bit!

Which CSS property is used for rounded border corners?

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

How do you make a triangle with rounded corners in CSS?

Method 1.Use SVG's polygon tag <polygon> generate a triangle, and use SVG's stroke-linejoin="round" generate rounded corners at the connection. Here, it is actually the rounded corners generated stroke-linejoin: round attribute of the SVG polygon.


2 Answers

CSS3 Gradients can do the trick:

Try this, Here's a Fiddle.

div {
  background: #c00;
  /* fallback */
  background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div {
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}


/* Ignore the CSS from this point, it's just to make the demo more presentable */

div {
  float: left;
  width: 50px;
  margin: 15px auto;
  padding: 15px;
  color: white;
  line-height: 1.5;
}
<div>Div 1</div>
<div>Div 2</div>
like image 106
AlphaMale Avatar answered Dec 06 '22 16:12

AlphaMale


Here's a way, although it does have some shortcomings, like no borders and it isn't transparent:

.left,
.right {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
}

.left {
  background: lightpink;
}

.right {
  background: lightblue;
}

.right::after,
.left::after {
  width: 0px;
  height: 0px;
  background: #fff;
  content: '';
  position: absolute;
  bottom: 0;
}

.right::after {
  left: 0;
  border-top: 10px solid lightblue;
  border-right: 10px solid lightblue;
  border-left: 10px solid white;
  border-bottom: 10px solid white;
}

.left::after {
  right: 0;
  border-top: 10px solid lightpink;
  border-right: 10px solid white;
  border-left: 10px solid lightpink;
  border-bottom: 10px solid white;
}
<div class="left"></div>
<div class="right"></div>

RESULT:

enter image description here

Here's a fiddle.

like image 44
thordarson Avatar answered Dec 06 '22 15:12

thordarson