<!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实现的提示框，它不依赖JavaScript，但可以实现动态效果，如自动定位和自定义弹出方向。这种技术在优化页面性能和减少代码复杂性方面具有优势，因为CSS比JavaScript更轻量级，且...
这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的三角形的示例，这对于构建诸如下拉菜单、提示箭头等交互元素时非常有用。 首先，我们要理解CSS是如何生成三角形的。由于CSS无法直接画出几何...
在特定场景下，我们可能需要使用CSS来创建各种形状，其中最常见的是CSS三角形。本篇文章将详细介绍如何利用CSS来制作三角形。 首先，理解CSS三角形的工作原理至关重要。三角形的形状实际上是由边框（border）创建的...
纯CSS三角箭头,不用图片的。收集于互联网，只为兴趣与学习交流，不作商业用途
在CSS世界中，三角形样式是一种常见的视觉效果，用于创建箭头、指示器或装饰元素。这个主题主要涉及如何利用CSS的基本属性和技巧来构造出看似复杂的几何形状，特别是三角形。下面我们将深入探讨CSS创建三角形的原理...
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实现逼真的三角形播放器按钮
在CSS世界中，绘制图形并非只能依赖于复杂的图像或者JavaScript，有时简单的CSS技巧就能实现一些意想不到的效果，比如利用边框(border)属性来绘制一个三角形。这个方法巧妙地利用了边框的不同宽度和颜色，以及元素的...
在前端开发中，CSS（Cascading Style Sheets）是一种用于定义网页元素样式的重要技术。它不仅可以控制元素的颜色、字体、布局等，还可以创造出各种复杂的图形，其中之一就是三角形。本教程将详细介绍如何仅使用CSS来...
CSS三角箭头是指利用CSS（层叠样式表）的属性来创建箭头形状的图形，常用于网页设计中，比如对话框箭头、下拉菜单箭头等。传统的做法会使用图片作为箭头，但这种方法需要两张图片来处理hover效果，对于只需要一个小...
本文将深入探讨如何利用纯CSS3实现饼形图和倒三角统计图，这两种图表在数据可视化中都有广泛的应用。无需JavaScript（js）的参与，我们可以通过CSS3的特性来实现动态和交互式的视觉效果。 首先，让我们了解饼形图。...
复制代码代码如下: <style> .b{ position: absolute; z-index: 2; width: 0; height: 0; line-height: 0; font-size: 0; border-width: 5px; /*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: ...
本文将详细介绍两种常用的CSS三角图标制作方法，帮助读者理解和掌握如何在实际项目中应用这些技巧。 #### 方法一：利用嵌套元素实现 第一种方法通过巧妙地利用HTML中的嵌套元素以及CSS的定位和溢出属性来创建一个...
CSS三角形是一种常见的技巧，用于在不使用图像的情况下创建指向各个方向的箭头或其他三角形元素。"triangle-generator"是一个工具，它允许开发者通过JavaScript生成自定义的CSS代码，以创建所需的三角形。 CSS...