CSS-在div上切成全对角透明角 [英] CSS - Full diagonal transparent corner cut on div
本文介绍了CSS-在div上切成全对角透明角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何从div处切掉整个角，保持透明.
How can I cut the full corner off a div, keeping it transparent.
这是我尝试过的:
.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>结果:
想要的结果(图像已编辑):
Wanted outcome (Image edited):
我在这里创建了一个JSFiddle: http://jsfiddle.net/x7fnxu2w/
I have created a JSFiddle here:http://jsfiddle.net/x7fnxu2w/
推荐答案
svg 解决方案，无需任何CSS:
如果使用 svg ，则无需任何CSS即可实现整个形状.
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>您可以在:before 元素中添加一个三角形.
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" />这篇关于CSS-在div上切成全对角透明角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
