CODEWITHSUNDEEP
csscss-shapes
Scott
Scott

Reputation: 1310

Drawing 45 Degree angle with CSS3

I'm trying to draw a 45 degree angle with CSS, the first image is what i'm trying to achieve, the second is what i've managed. I can't figure out how to cut the outside of the angle by another 45 degrees (see dotted red line).

enter image description here

.flick .text {
  position: relative;
  z-index: 50;
}
.flick {
  background-color: #055468;
  color: white;
  margin-left: 140px;
  padding: 15px;
}
.flick:before {
  background: #055468;
  content: "";
  height: 100px;
  margin: -65px 0 0 -90px;
  position: absolute;
  transform: skew(45deg);
  width: 80px;
}
<div class="flick"><span class="text">Hello world</span></div>

Upvotes: 7

Views: 10707

Answers (1)

somethinghere
somethinghere

Reputation: 17350

You should use rotate instead of skew for this. I have also changed the position of your :before element so its bottom right corner lines up with the bottom left corner of your flick class and then set the transform origin to the shared corner, creating exactly the effect you wanted (I also moved it away from the top so the effect would be visible):

.flick .text {
  position: relative;
  z-index: 50;
}
.flick {
   margin-top: 200px;
  background-color: #055468;
  color: white;
  margin-left: 140px;
  padding: 15px;
  position: relative;
}
.flick:before {
  background: #055468;
  content: "";
  width: 100px;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 100%;
  transform: rotateZ(45deg);
  transform-origin: bottom right;
  width: 80px;
}
<div class="flick"><span class="text">Hello world</span></div>

Upvotes: 12

Related Questions