<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS测试</title>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="CSS测试">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 不显示工具栏和菜单栏 -->
<meta name="format-detection" content="telphone=no, email=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<style type="text/css">
*{
border:0;
margin:0;
padding:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
}
html,body{
width:100%;
font-size:14px;
font-family:宋体;
}
body{
padding:50px;
}
hr{
height: 2px;
width: 100%;
background: #ddd;
margin: 5px 0;
}
.ws-arr{
font-size:0;
}
.ws-arrl{
width:0;
border:20px solid #fff;
border-left:0;
border-right-color:red;
}
.ws-arrr{
width:0;
border:20px solid #fff;
border-right:0;
border-left-color:red;
}
.ws-arru{
width:0;
border:20px solid #fff;
border-bottom:0;
border-top-color:red;
}
.ws-arrd{
width:0;
border:20px solid #fff;
border-top:0;
border-bottom-color:red;
}
.ws-arr-q{
width:0;
border:20px solid #fff;
border-top-color:red;
border-bottom-color:red;
border-left-color:blue;
border-right-color:blue;
}
.ws-arr-qh{
width:0;
border:20px solid #fff;
border-left-color:red;
border-right-color:red;
border-top-color:blue;
border-bottom-color:blue;
}
.ws-arr-qn{
width:0;
border:20px solid #fff;
border-top-color:red;
border-bottom-color:red;
}
.ws-arr-qhn{
width:0;
border:20px solid #fff;
border-left-color:red;
border-right-color:red;
}
.ws-arr-c div{
border-left-color: red;
border-right-color: red;
border-bottom-color: #fff;
border-top-color: #fff;
}
</style>
</head>
<body>
<div class="ws-arr">
<div class="ws-arrl"> </div>
<hr/>
<div class="ws-arrr"> </div>
<hr/>
<div class="ws-arru"> </div>
<hr/>
<div class="ws-arrd"> </div>
<hr/>
<div class="ws-arr-q"> </div>
<hr/>
<div class="ws-arr-qn"> </div>
<hr/>
<div class="ws-arr-qh"> </div>
<hr/>
<div class="ws-arr-qhn"> </div>
<hr/>
<div class="ws-arr-du">
<div class="ws-arrd"> </div>
<div class="ws-arru"> </div>
</div>
<hr/>
<div class="ws-arr-c">
<div class="ws-arrd"> </div>
<div class="ws-arru"> </div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
css三角形、居中、圣杯布局
纯CSS三角箭头,不用图片的。收集于互联网，只为兴趣与学习交流，不作商业用途
css 三角形样式,样式表,css样式,三角形样式,css三角
纯js css带三角的提示框，可自动定位，可强制设置弹出方向及对其方式。通过chrome/FF/IE7测试
CSS3的transform可以实现页面元素的扭转、变形等功能。 实现如下图所示的三角形小图标只需要transform定义的一行代码即可，无需再使用图片。参考文档： http://blog.csdn.net/u014175572/article/details/51535543
通过css代码去实现三角形，用在网页开发中，演示通过css去实现菜色的矩形、上三角形、下三角形、右三角形、左三角形。
利用CSS画各种三角形。
手写笔三角形发生器使用 Stylus 生成 CSS 三角形的小混合。用法 triangle(width, height, direction, color) .make-me-a-triangle-babytriangle(10px, 10px, 'bottom', #000)新产品经理 npm install stylus-triangle...
CSS实现逼真的三角形播放器按钮CSS实现逼真的三角形播放器按钮
复制代码代码如下: <style> .b{ position: absolute; z-index: 2; width: 0; height: 0; line-height: 0; font-size: 0; border-width: 5px; /*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: ...
纯CSS3饼形和倒三角统计图 无js 包可用
用纯css绘制三角形，不是用图片
还在为网页太多图片加载太慢而发愁吗？纯CSS打造三角形，不需要用图片了！
主要介绍了CSS三角箭头应用实践,主要分为用来制作对话框箭头和下拉菜单箭头等情况,需要的朋友可以参考下
CSS三角形生成器 CSS利用border生成三角形原理图
css--实现透明三角形(来自百度web前端工程师试题)
主要介绍了css实现带圆角三角型的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧