CSS - Full diagonal transparent corner cut on div

css, css-shapes, html

Solution

`svg` solution without any CSS:

The entire shape could be achieved without any CSS if you use `svg`.

<body style="background-color: yellow">
  <svg height="60" width="470">
    <path d="M0,60 L50,0 L420,0 A56,56 0 0,1 470,60z" fill="#374418" />
    <a xlink:href="#">
      <text x="410" y="37" font-size="18" font-weight="500" fill="yellow">Test</text>
    </a>
  </svg>
</body>

CSS Solution:

You can add a triangle to the `:before` element.

body {
  background-color: yellow;
}
.well-corner {
  width: 430px;
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background: rgba(8, 12, 23, 0.8);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  border-top-right-radius: 50px;
}
.well-link {
  float: right;
}
.well-corner:before {
  content: '';
  position: relative;
  top: -39px;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 65px solid transparent;
  border-left: 55px solid yellow;
}

<div class="well-corner clearfix">
  <a class="well-link" href="">Test</a>
</div>

<img src="http://i.gyazo.com/7cb269f66e7b0bd3870c8b04ac52f4cd.png" />

Problem

How can I cut the full corner off a div, keeping it transparent. This is what I've tried: ``` .well-corner { min-height: 20px; padding: 19px; margin-bottom: 20px; background: rgba(8, 12, 23, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); border-top-right-radius: 50px; } .well-link { float: right; } .diagonal { float: left; width: 50px; transform: skewX(-10deg); } ``` ``` <div class="well-corner clearfix"> <div class="diagonal"> </div> <a class="well-link" href="">Test</a> </div> ``` Outcome: Wanted outcome (Image edited): I have created a JSFiddle here:http://jsfiddle.net/x7fnxu2w/

Original source