CODEWITHSUNDEEP
htmlcsscss-shapes
Willem van der Veen
Willem van der Veen

Reputation: 36630

custom CSS corner with lining

I know that it is possible to make a corner like this:

.left-corner {
  width: 0;
  height: 0;
  border-top: 100px solid powderblue;
  border-left: 100px solid transparent;
}
<div class="left-corner"></div>

Is it possible to make a corner with CSS with multiple colors out of an element. Like this?

enter image description here

Upvotes: 3

Views: 321

Answers (4)

VorganHaze
VorganHaze

Reputation: 2056

You can accomplish complex border layouts using transform: skew(), like this:

* {
  margin: 0;
  padding: 0;
}

.left-corner {
  width: 0;
  height: 0;
  border-top: 100px solid black;
  border-left: 100px solid transparent;
}

.left-corner:before {
  content: "";
  position: absolute;
  top: 50px;
  left: 0px;
  border-top: 10px solid red;
  border-left: 100px solid red;
  transform: skew(0deg, 45deg);
}
<div class="left-corner"></div>

Upvotes: 5

Temani Afif
Temani Afif

Reputation: 273031

Here is an easier solution with a simple linear-gradient:

body {
  background: pink;
}

.left-corner {
  width: 100px;
  height: 100px;
  background: linear-gradient(to top right, transparent 50%, red 50%, red 54%, blue 54%);
}
<div class="left-corner"></div>

You can also easily create the out of color effect if needed :

body {
  background: pink;
}

.left-corner {
  width: 100px;
  height: 100px;
  background: 
  linear-gradient(to top right, transparent 48%, red 48%, red 52%, transparent 52%),
  linear-gradient(to top right, transparent 51%,blue 0%) 0 5px/calc(100% - 5px) calc(100% - 5px) no-repeat;
  border-radius:3px 0 3px 0;
}
<div class="left-corner"></div>

And you can easily set many colors:

body {
  background: pink;
}

.left-corner {
  width: 100px;
  height: 100px;
  background: linear-gradient(to top right, transparent 45%, green 45%, green 48%, red 48%, red 52%, yellow 52%, yellow 56%, transparent 0%), 
  linear-gradient(to top right, transparent 50%, blue 0%) 0 5px/calc(100% - 5px) calc(100% - 5px) no-repeat;
  border-radius:5px 0 5px 0;
}
<div class="left-corner"></div>

Upvotes: 6

Bhuwan
Bhuwan

Reputation: 16855

According to your requirement of extra height of border (red one)....

...use the pseudo class :after for this using position:absolute.

...give your div width and height equal to the border-width i.e 100px and apply box-sizing:border-box.

...the height value is calculated by square root of 1002 + 1002(as 100 is your border-width) plus extra width according to your requirement..(i.e 6 in this case).

...left value will be the half of the border-width

...top value will be the (border-width+height)/2.

Stack Snippet

.left-corner {
  width: 100px;
  height: 100px;
  border-top: 100px solid powderblue;
  border-left: 100px solid transparent;
  position: relative;
  box-sizing: border-box;
}

.left-corner:after {
  content: "";
  position: absolute;
  top: -123.4213px;
  left: -52px;
  width: 6px;
  background: red;
  height: 147.4213px;
  transform: rotate(-45deg);
  border-radius: 4px;
}
<div class="left-corner"></div>

Upvotes: 2

Christoph Dietrich
Christoph Dietrich

Reputation: 537

Well you could use a peusdo element and put it above your original Element, if you want it to exactly look like the image you've posted.

See Code Snippet below.

.left-corner{
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 120px solid transparent;
  
  position:relative;
}

.left-corner:before {
  content: "";
  
  position:absolute;
  top:-120px;
  left:-100px;
  
  border-top: 100px solid powderblue;
  border-left: 100px solid transparent;
}
<div class="left-corner"></div>

Upvotes: 4

Related Questions