CSS - div上的全对角透明角切割

时间：2014-11-30 17:09:48

标签： html css css-shapes

如何从div中剪掉整个角落，使其保持透明。

这是我尝试过的：

  .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>

结果：

Current Outcome

通缉结果（图片编辑）：

Wanted outcome

我在这里创建了一个JSFiddle：http://jsfiddle.net/x7fnxu2w/

3 个答案:

答案 0 :(得分：5)

演示 - http://jsfiddle.net/x7fnxu2w/3/

使用：伪元素:before来设置使用yellow border的三角形来隐藏div的其他部分

并使用border样式dotted来修复像素化问题

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

答案 1 :(得分：4)

没有任何CSS的

svg解决方案：

如果您使用svg，则无需任何CSS即可实现整个形状。

<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解决方案：

您可以在: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" />

答案 2 :(得分：3)

您可以创建一个div并指定边框宽度并将其放在适当的位置

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我用你现有的代码创建了一个JSBin，并添加了两个带有triangle1和triangle2类的div来演示你需要什么以及它是如何工作的

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

相关问题
最新问题