Welcome, Old Sport!

如何创建三角形在CSS3中

by ilikecss ON 2011/06/14 15162

Creating Triangles In Button With CSS3今天早上在论坛里看到有位同学在寻找一种按钮的制作方法,简单一个带有三角形状的按钮。要求是使用CSS3技术和不使用图片。我在这里给大家分享一下这种按钮的具体制作方法,还是比较简单的,希望以后能够普及CSS3技术。

Step1. 创建HTML

<div id="demo">
    <div class="chat-button">DEMO!
    <div class="chat-button-arrow-border"></div>
    <div class="chat-button-arrow"></div>
</div>

Step2. 创建CSS

#demo {
	width: 160px;
	margin: 200px auto;
	position: relative;
}
.chat-button {
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	background: #36518F;
	border-color: #172D6E #172D6E #0E1D45;
	border-style: solid;
	border-width: 1px;
	color: #FFFFFF;
	font-family: "helvetica neue",helvetica,arial,sans-serif;
	font-size: 16px;
	font-weight: bold;
	padding: 7px 0 8px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 -1px 1px #000F4D;
	width: 150px;
}
.chat-button-arrow-border {
	border-color: #172D6E transparent transparent;
	border-style: solid;
	border-width: 10px;
	bottom:-20px;
	height: 0px;
	left: 66px;
	position: absolute;
	width: 0px;
	border-shadow: 0 -1px 1px #000F4D; 
}
.chat-button-arrow {
	border-color: #36518F transparent transparent;
	border-style: solid;
	border-width: 10px;
	bottom: -18px;
	height: 0;
	left: 66px;
	position: absolute;
	width :0;
}

释注: //transparent这个参数很重要,在border里的意思就是透明,写成

border-color: #36518F transparent transparent;

意思就是上边框颜色为#36518F,其他为透明。

7条评论
  1. #1

    LZ什么的最好了说道:

    HTML5 + CSS3 是大趋势啊!!!

  2. #2

    强哥仔说道:

    border-color: #36518F transparent transparent;
    ie6表示不支持

  3. #3

    彭超说道:

    火狐4.0下很糟糕

    • 是吗,我之前FF3.5看着还好的,现在FF5.0也没问题,4.0我没用过,直接更新跳过了。




TOP