展会信息港展会大全

css实现圆角三角形例子(无图片)
来源:互联网   发布日期:2016-03-25 16:26:38   浏览:1676次  

导读:以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧。效果如下图所示三角形所对方向...

以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧。

效果如下图所示

三角形所对方向"width: 0",

反向为三角形高度(20)"border-width: 20px",

反向颜色为三角形颜色"border-color: #eee",

其它两个方向相加为三角形宽度(30)"border-width: 15px"

CSS:

代码如下

复制代码

span {

position: absolute;

width: 0;

height: 0;

border-width: 0 15px 20px 15px;

border-style: solid;

border-color: transparent transparent #eee transparent;

top: -20px;

left: 50%;

margin-left: -15px;

}

例子

代码如下

复制代码

<!DOCTYPE html>

<html>www.111cn.net

<head>

<title>随心所欲的三角形</title>

<style>

div {

width: 200px;

height: 60px;

background-color: #eee;

position: absolute;

left: 50%;

margin-left: -150px;

margin-top: -50px;

top: 50%;

border-radius: 10px;

float: left;

font: 12px/20px "微软雅黑";

color: #000;

padding: 20px 50px;

}

span {

position: absolute;

top: -20px;

width: 0;

height: 0;

border-width: 0 15px 20px 15px;

border-style: solid;

border-color: transparent transparent #eee transparent;

left: 50%;

margin-left: -15px;

} www.111cn.net

</style>

</head>

<body>

<div>

<span></span>

三角形所对方向"width: 0",反对的方向为三角形高度颜色为三角形颜色,其它两个方向相加为宽度

</div>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港