CSS - Full diagonal transparent corner cut on div

问题

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:

Current Outcome

Wanted outcome (Image edited):

Wanted outcome

I have created a JSFiddle here:http://jsfiddle.net/x7fnxu2w/

回答1:

`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" />

回答2:

demo - http://jsfiddle.net/x7fnxu2w/3/

use :pseudo element :before for styling the triangle used yellow border to hide the other part of the div

and used border style dotted to fix the pix-elated issue

body {
  background-color: yellow;
}
.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;
  position: relative;
  width: 430px;
}
.well-corner:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-style: dotted;
  border-color: yellow rgba(56, 59, 18, 1) transparent transparent;
  border-width: 58px 53px 0px 0px;
}
.well-link {
  float: right;
}
.diagonal {
  float: left;
  width: 50px;
  transform: skewX(-10deg);
}

<!-- What I've tried -->
<div class="well-corner clearfix">
  <div class="diagonal"></div> <a class="well-link" href="">Test</a>

</div>
<!-- Edited image, wanted outcome -->
<img src="http://i.gyazo.com/7cb269f66e7b0bd3870c8b04ac52f4cd.png">

回答3:

You can create a div and specify the border width and place it in the appropriate position

.triangle1 {
  border-bottom: 58px solid #383B12;
  border-left: 58px solid yellow;
  font-size: 0px;
  float: left;
  line-height: 0%;
  width: 0px;
}
.triangle2 {
  border-bottom: 58px solid red;
  border-left: 58px solid blue;
  font-size: 0px;
  float: left;
  line-height: 0%;
  width: 0px;
}
body {
  background-color: yellow;
}
.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);
}

<h1>This is what you want</h1>
<div class="triangle1">
</div>

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

<h1>Here is how it works</h1>
<div class="triangle2">
</div>

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

I have created a JSBin with your existing code and added two divs with classes triangle1 and triangle2 to demonstrate what you require and how it works

http://jsbin.com/vesoko/4/edit?html,css,output

来源：https://stackoverflow.com/questions/27215870/css-full-diagonal-transparent-corner-cut-on-div

标签

html

css

css-shapes