html - 仅使用 CSS 的三 Angular 形边框

Question

我想只使用 CSS 创建如下标题的背景:

我能够创建三 Angular 形，但无法正确定位它。 HTML 很简单:

<h1><a href="#">Link ...</a></h1>

这是 CSS:

h1{ 
    margin: 20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 50px 0 0 50px;
    border-color: transparent transparent transparent #0000ff;
}

JSFiddle 演示。 http://jsfiddle.net/yGsny/

Answer 1

这是您的问题的一种可能解决方案:

  h1{
        background:blue;
        line-height:30px;
        padding:0 20px;
        width:50px;
        position:relative;
    }
    a{color:white; text-decoration:none;}
    h1:before{
        position:absolute;
        left:100%;
        top:0;
        content:"";
        border:30px solid blue;
        border-width:0px 30px 30px 0px;
        border-color:transparent transparent blue transparent;
    }

Fiddle