CODEWITHSUNDEEP
htmlcss
LimpingNinja
LimpingNinja

Reputation: 658

Angled corners on CSS with Transparency

I've found multiple ways to create angled corners on an element, but what I'm trying to achieve is the ability to keep those corners while having transparency. I'm trying to keep this simple and purely in css (or less) and html.

A current working copy of what I have is below, this is obviously using white rotated boxes to overlap the edges causing the bevel.

Another way I noted was using linear gradients linear-gradient(-220deg, transparent 10px, #ad1c1c 10px); to affect a corner, this does allow the transparency through but I am just not capable of making a simplistic example with this applied to both top left and top right corners. 

h1 {
  position: relative;
  width: 500px;
  background: #ad1c1c;
  color: #fff;
  font: bold 25px/35px 'Lucida sans';
  height: 35px;
  padding: 0 30px;
  display: inline-block;
}

.title {
  text-align: center;
}

.bevel::before,
.bevel::after {
  position: absolute;
  background: #fff;
  content: " ";
  display: block;
  height: 30px;
  width: 30px;
}

.bevel::before {
  left: -20px;
  top: -20px;
  transform: rotate(-135deg);
}

.bevel::after {
  right: -20px;
  top: -20px;
  transform: rotate(-45deg);
}
<div class="title">
  <h1 class="bevel">Test</h1>
</div>

Upvotes: 3

Views: 954

Answers (1)

Temani Afif
Temani Afif

Reputation: 273561

You can consider multiple background to achieve this and you are almost good with your linear-gradient(-220deg, transparent 10px, #ad1c1c 10px). Simply adjust the size and position:

h1 {
  color: #fff;
  text-align: center;
  padding:10px;
  background:
    linear-gradient(-225deg,transparent 10px,#ad1c1c 0) left /50.5% 100%,
    linear-gradient( 225deg,transparent 10px,#ad1c1c 0) right/50.5% 100%;
  background-repeat:no-repeat;
}

body {
 background:pink;
}
<h1 >Test</h1>

And with CSS variable to better control the size:

h1 {
  --s:10px;
  color: #fff;
  text-align: center;
  padding:10px;
  background:
    linear-gradient(-225deg,transparent var(--s),#ad1c1c 0) left /50.5% 100%,
    linear-gradient( 225deg,transparent var(--s),#ad1c1c 0) right/50.5% 100%;
  background-repeat:no-repeat;
}

body {
 background:pink;
}
<h1 >Test</h1>

<h1 style="--s:20px">Test</h1>


<h1 style="--s:30px">Test</h1>

Here is another idea considering skew and pseudo elements:

h1 {
  color: #fff;
  text-align: center;
  padding:0 20px;
  background: #ad1c1c content-box;
  position:relative;
  overflow:hidden;
}
h1:before,
h1:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:20px;
  background:#ad1c1c;
}
h1:before {
  right:0;
  transform-origin:left;
  transform:skewY(45deg);
}

h1:after {
  left:0;
  transform-origin:right;
  transform: skewY(-45deg);
}

body {
 background:pink;
}
<h1 class="bevel">Test</h1>

Upvotes: 2

Related Questions