如何在純CSS的div之前製作三角形？

朋友你好我已經嘗試了很多次，但我不是成功比請幫我如何在純CSS的div之前製作三角形？

我想這下面的圖像作爲這樣

enter image description here

現在我已經創建了這一點，但沒有創造右角這個現在的div任何機構請幫我

我的代碼是

的CSS

.dashbord a { 
    display:block; 
    line-height:28px; 
    padding-left:8px; 
    font-family: 'LatoRegular'; 
    font-size:14px; 
    color:#58544e; 
    max-width:300px; 
    text-shadow:1px 0 0 rgba(241,236,231,1); 
} 
.dashbord .active{ 
    background: #b43720; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYjQzNzIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5NDU0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
    background: -moz-linear-gradient(90deg, #b43720 0%, #e94541 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#b43720), color-stop(100%,#e94541)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(90deg, #b43720 0%,#e94541 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(90deg, #b43720 0%,#e94541 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(90deg, #b43720 0%,#e94541 100%); /* IE10+ */ 
    background: linear-gradient(90deg, #b43720 0%,#e94541 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b43720', endColorstr='#e94541',GradientType=1); /* IE6-8 fallback on horizontal gradient */ 
    box-shadow:1px 0 0 0 rgba(230,227,223,1), 0px -3px 0 0 rgba(153,40,19,1) inset; 
    text-shadow:1px 0 0 rgba(153,40,19,1); 
    color:#fff; 
    border-radius:5px 0 0 5px; 
    line-height:30px; 
    position:relative; 
    margin-left:-4px; 
} 
.dashbord .active:after{ 
    content:''; 
    position:absolute; 
    right:-9px; 
    top:0; 
    bottom:0; 
    border-bottom: 15px solid transparent; 
    border-left: 9px solid #b43720; 
    border-top: 15px solid transparent; 
}

HTML

<div class="dashbord"> 
<a href="#" class="active">Co-Workers</a> 
</div>

的jsfiddle點擊這裏http://jsfiddle.net/TBB9S/

來源

2012-06-19 Rohit Azad

這樣寫：

.dashbord .active:after{ 
    content:''; 
    position:absolute; 
    right:-11px; 
    top:3px; 
    z-index:-1; 
    width:22px; 
    height:22px; 
    background:green; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
    box-shadow:-3px 0 0 0 rgba(153,40,19,1) inset; 
    background: -moz-linear-gradient(left top, #e94541 0%,#b43720 100%); 
    background: -webkit-linear-gradient(left top, #e94541 0%,#b43720 100%); 
    background: linear-gradient(left top, #e94541 0%,#b43720 100%); 
}

入住這http://jsfiddle.net/TBB9S/2/

來源

2012-06-19 06:50:37 sandeep

@sandeep - 你可以使用SVG作爲CSS背景！？ –

也許值得指出的是，這不是一個完全重複的 - 它接近，但原始版本的角度更平坦 - 接近120度，可能比這種技術的90度角更接近。 –

@TylerEaves爲了改變角度，你也需要使用一個歪斜。請參閱http://stackoverflow.com/questions/12431596/css-gradient-for-triangle-shaped-arrow/12433597#12433597 – Ana

如何在純CSS的div之前製作三角形？

回答

相關問題