Clever Geek Handbook

CSS - Full diagonal transparent corner cut on div

How can I cut a full corner from a div while keeping it transparent.

Here's 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>
Run codeHide result


Result:

Current outcome

Desired result (Image edited):

Wanted outcome

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

+3


source to share


3 answers


svg

without CSS:

The whole form can be achieved without CSS if you are using 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>
Run codeHide result




CSS solution:

You can add a triangle to an element :before

.

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" />
Run codeHide result


+4


source


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

use: a pseudo-element :before

for styling the triangle used yellow

border

to hide the other partdiv

and used a style of border

style dotted

, to correct the problem associated with the pixels



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">
Run codeHide result


+5


source


You can create a div and specify the width of the border and place it in the position you want.

.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>
Run codeHide result


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

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

+3


source






More articles:


All Articles