如何使块的边角倒角？ [英] How to bevel the corner of a block div?
本文介绍了如何使块的边角倒角？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下HTML文档：
<！DOCTYPE HTML&
< html>
< head>
< meta charset =utf-8>
< title>ТегDIV< / title>
< style type =text / css>
.block1 {
width：200px;
background：#ccc;
padding：5px;
padding-right：20px;
border：solid 1px black;
float：left;
}
< / style>
< / head>
< body>
< div class =block1>文本内容< / div>
< / body>
< / html>
如何描述样式以获得以下内容？
解决方案
直到CSS4 border-corner-shape 属性有危险！和它没有实现，这可以通过使用CSS3 transforms（保持 border 用法）：
HTML ：
< div class =box>
文本内容
< / div>
CSS：
.box {
width：200px;
height：35px;
line-height：35px;
padding：0 5px;
background-color：#ccc;
padding-right：20px;
border：solid 1px black;
border-right：0;
position：relative;
}
.box：after {
content：;
display：block;
background-color：#ccc;
border：solid 1px black;
border-left：0;
width：35px;
height：35px;
position：absolute;
z-index：-1;
top：-1px; / *由于1px边框拉高* /
右：-17.5px; / * 35px / 2 * /
transform：skew（-45deg）;
-o-transform：skew（-45deg）;
-moz-transform：skew（-45deg）;
-webkit-transform：skew（-45deg）;
}
这里是 JSBin演示 。 在上例中的另一个 div 拥有 box2 的 class 属性，它实现不使用CSS3声明，你可以考虑使用它;）
I have the following HTML document:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег DIV</title>
<style type="text/css">
.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left;
}
</style>
</head>
<body>
<div class="block1">Text Content</div>
</body>
</html>
How do I describe the style to get the following?
解决方案
Until CSS4 border-corner-shape property is in danger! and it's not implemented, This can be done by using CSS3 transforms (to keep border property free for further usage):
HTML:
<div class="box">
Text Content
</div>
CSS:
.box {
width: 200px;
height: 35px;
line-height: 35px;
padding: 0 5px;
background-color: #ccc;
padding-right: 20px;
border: solid 1px black;
border-right: 0;
position: relative;
}
.box:after {
content: "";
display: block;
background-color: #ccc;
border: solid 1px black;
border-left: 0;
width: 35px;
height: 35px;
position: absolute;
z-index: -1;
top: -1px; /* pull it up because of 1px border */
right: -17.5px; /* 35px / 2 */
transform: skew(-45deg);
-o-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
}
Here is JSBin Demo.
NOTE: There's another div in example above has class attribute of box2, which implemented without using CSS3 declarations that you might consider using it ;)
这篇关于如何使块的边角倒角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
