Html 平尖角或斜角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10883963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flat sharp corner or beveled corners
提问by AturSams
Is there any way to create a sharp flat corner with CSS and HTML?
有没有办法用 CSS 和 HTML 创建一个尖锐的平角？
Something like this:
像这样的东西：
____
/ \
| |
\____/
回答by Sven Bieder
Look here. There you find all you need:
看这里。在那里你可以找到你需要的一切：
http://css-tricks.com/examples/ShapesOfCSS/
http://css-tricks.com/examples/ShapesOfCSS/
Edit In case the link goes lost:
编辑万一链接丢失：
CSS
CSS
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0; left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px; height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
回答by Dejan
Here is my solution, using the CSS shapes from Chris Coyier.
这是我的解决方案，使用 Chris Coyier 的 CSS 形状。
http://jsfiddle.net/dDejan/XSs9L/
http://jsfiddle.net/dDejan/XSs9L/
4 extra divs are inserted via JavaScript (well, jQuery actually) for each of your containers that you want shaped this way. These divs are positioned absolutely in the corners of it's parent, and they are styled accordingly as described in the link posted by Sven Bieder
4 个额外的 div 通过 JavaScript（好吧，实际上是 jQuery）为您想要以这种方式塑造的每个容器插入。这些 div 绝对位于其父级的角落，并且它们的样式按照 Sven Bieder 发布的链接中的描述进行了相应的设置
回答by Diodeus - James MacFarlane
You can compose this using absolutely-positioned :beforeand :afterelements using the CSS trianglestechnique.
您可以使用CSS 三角形技术使用绝对定位:before和:after元素来组合它。
<div class="box"></div>
css:
css：
.box {
background-color:#2020ff;
height:50px;
width:50px;
position:relative
}
.box:after {
content:" ";
width: 0;
height: 0;
border-top: 10px solid #ffffff;
border-bottom: 10px solid transparent;
border-right:10px solid #ffffff;
position:absolute;
top:-9px;
right:0px;
}
回答by Cvijetin Maleti?
box {
background-color: transparent;
position: fixed;
width: 300px;
height: 300px;
}
svg {
width: 300px;
height: 300px;
}
polygon {
visibility: visible;
background: black;
stroke: white;
}<box>
<svg>
<polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" />
</svg>
</box>回答by Rohit Panchal
.rotate {
margin: 100px;
background-color: olivedrab;
width: 100px;
height: 100px;
transform: rotate(45deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="rotate"></div>
</body>
</html>