Is there a way to make angled corners using CSS3 on an element?

Question

Trying to get this "angled cutout" look. I'd prefer not use any hacks with pseudo elements if possible.

HTML would be something simple like:

   <span>Hello World</span>

CSS:

   span {
     // some crazy new css-3 rule?
   }

I don't care about older browsers and the solution must be responsive.

Can I ask why you don't want "hacks with pseudo elements"? (since you don't care about older browsers, I don't see why not?) — George
– George, Commented Apr 15, 2017 at 10:09

Asons · Accepted Answer · 2017-04-15 13:05:25Z

2

No, there is no such crazy rules in CSS3 (and none in CSS4*), so you can either create a SVG, or use the unwanted pseudo (or 2 extra inner elements, which IMHO is worse)

Here is the simplest, less hackiest, solution with pseudo

span {
  position: relative;
  display: inline-block;
  padding: 10px 20px 10px 25px;
  margin: 10px;
}
span::before, span::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 50%;
  border: 2px solid #ddd;
  background: #eee;
  z-index: -1;
}
span::before {
  border-bottom: none;
  transform: skewX(40deg);
}
span::after {
  top: 50%;
  border-top: none;
  transform: skewX(-40deg);
}

/* second span */
span ~ span {
  font-size: 32px;
}

<span>Hello World</span>
<br>
<span>Hello World</span>

In CSS4 we might get an option of wider range of border shapings

edited Apr 15, 2017 at 13:05

answered Apr 15, 2017 at 10:47

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karam Jabareen · Accepted Answer · 2017-04-15 10:46:26Z

I make an example for cutout corner with CSS3.

.quote {
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
}
.q{
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  padding:10px;
  margin:100px;
  width:100px;
  border-right: 10px solid black;
}
.quote:after {
  background: inherit;
  bottom: -11px;
  content: '';
  display: block;
  height: 200%;
  left: -50px;
  position: absolute;
  right: -10px;
  transform: skewX(-35deg);
  transform-origin: 100%;
  z-index: -1;
}

.quote:before {
  background: inherit;
  top: -11px;
  content: '';
  display: block;
  height: 200%;
  left: -50px;
  position: absolute;
  right: -10px;
  transform: skewX(35deg);
  transform-origin: 100%;
  z-index: -1;
}

.q:after{
      background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 10px;
  top:20px;
  position: absolute;
  right: -50px;
  transform: skewX(-35deg);
  transform-origin: 100%;
  z-index: -1;
}
.q:before{
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 10px;
  top:-00px;
  position: absolute;
  right: -50px;
  transform: skewX(35deg);
  transform-origin: 100%;
  z-index: -1;
}

<div class="q">
    <span class="quote">Hello World!!</span>
</div>

Collectives™ on Stack Overflow

Is there a way to make angled corners using CSS3 on an element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related