html - 如何用CSS制作尖 Angular

Question

有谁知道如何制作如下所示的尖 Angular ？查看边缘如何环绕拐 Angular 。我也想知道这个词(如果有的话)。跨浏览器支持(IE8 及以上，额外的 IE7)是必须的。感谢您的帮助。

Answer 1

查看 this tutorial .我不知道它的跨浏览器兼容性如何(因为它是 CSS3)，但它达到了你想要的效果。

HTML:

<div>
    <h2></h2>
</div>

CSS:

div {
    width: 200px;
    padding: 50px;
    margin: 0 auto;
    border: 1px solid #333;
}

h2 {
    position: relative;
    width: 50%;
    height: 50px;
    margin: 30px 10px 10px -70px;
    background-color: orange;
}

h2:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    top: 100%;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #666 #666 transparent transparent;
}

JS Fiddle Example