CSS3菜单的形状，风格 [英] CSS3 menu shape, style

问题描述

任何人都可以通过电话告诉我在CSS中如何形成这样的形状，三角形的中心顶部或底部像我想要的那样？

编辑： / p>

有一个元素。

解决方案

@harry;有很多方法来创建这种类型的三角形箭头。我编辑@jam fiddle&

  div 
 {
 background：＃76a7dc; 
 padding：10px; 
 display：inline; 
 position：relative; 
} 
 
 div：after 
 {
 border-color：＃76a7dc transparent; 
 border-style：solid; 
 border-width：10px 10px 0; 
 content：; 
 margin-top：5px; 
 display：block; 
 position：absolute; 
 width：0; 
 margin-left：-10px; 
 left：50％; 
 bottom：-9px; 
} 
  

检查此示例 http://jsfiddle.net/sandeep/wWykY/2/

Can anyone tel me how I would make a shape like this in CSS, with the triangle centered top or bottom like I want it ?

Edit:

With one element.

解决方案

@harry; there are lot of ways to create this type of triangles arrows. I edit @jam fiddle & center the arrows.

CSS:

div
{
    background: #76a7dc;
    padding: 10px;
    display: inline;
    position:relative;
}

div:after
{
    border-color: #76a7dc transparent;
    border-style: solid;
    border-width: 10px 10px 0;
    content: "";
    margin-top: 5px;
    display: block;
    position: absolute;
    width: 0;
    margin-left:-10px;
    left:50%;
    bottom:-9px;
}

check this example http://jsfiddle.net/sandeep/wWykY/2/

这篇关于CSS3菜单的形状，风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！