CODEWITHSUNDEEP
css
chovy
chovy

Reputation: 75686

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

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

enter image description here

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.

Upvotes: 0

Views: 46

Answers (2)

Asons
Asons

Reputation: 87201

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>

Upvotes: 2

Karam Jabareen
Karam Jabareen

Reputation: 301

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>

Upvotes: 0

Related Questions