利用CSS3新特性创建透明边框三角_经验交流-css教程-PHP中文网

首页

web前端

css教程

利用CSS3新特性创建透明边框三角_经验交流

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:03 PM

css 透明

先来看一下效果，这在CSS3之前，完全是不可想象的，只有图片才能做的到，但在HTML5和CSS3大行其道的今天，实现这种效果，那都不是事啊。

看一下实现的代码：

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>

/* 上三角 */
.arrow-up {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid green;
}

/* 下三角 */
.arrow-down {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-top: 20px solid orange;
}

/* 右三角 */
.arrow-right {
 width: 0;
 height: 0;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 border-left: 60px solid blue;
}

/* 左三角 */
.arrow-left {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid silver;
}
</style>
</head>
<body>
 <div class="arrow-up"></div>
 <div class="arrow-down"></div>
 <div class="arrow-left"></div>
 <div class="arrow-right"></div>
</body>
</html>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7375

Java教程

1628

CakePHP 教程

1355

Laravel 教程

1267

PHP教程

1216

显示更多

Related knowledge

动态网页元素XPath和Class名变化频繁，如何稳定抓取目标a标签？ Apr 01, 2025 pm 04:12 PM

动态网页元素抓取难题：应对XPath和Class名变化很多爬虫开发者在抓取动态网页时会遇到一个棘手的问题：目标�...

Debian Strings能否兼容多种浏览器 Apr 02, 2025 am 08:30 AM

“DebianStrings”并非标准术语，其具体含义尚不明确。本文无法直接评论其浏览器兼容性。然而，如果“DebianStrings”指的是在Debian系统上运行的Web应用，则其浏览器兼容性取决于应用本身的技术架构。大多数现代Web应用都致力于跨浏览器兼容性。这依赖于遵循Web标准，并使用兼容性良好的前端技术（如HTML、CSS、JavaScript）以及后端技术（如PHP、Python、Node.js等）。为了确保应用与多种浏览器兼容，开发者通常需要进行跨浏览器测试，并使用响应式

如何在安卓手机上将XML转换成PDF？ Apr 02, 2025 pm 09:51 PM

直接在安卓手机上将 XML 转换为 PDF 无法通过自带功能实现。需要通过以下步骤曲线救国：将 XML 数据转换为 PDF 生成器识别的格式（如文本或 HTML）；使用 HTML 生成库（如 Flying Saucer）将 HTML 转换为 PDF。

如何解决Django项目部署到宝塔面板后样式丢失的问题？ Apr 01, 2025 pm 09:09 PM

Django项目部署到宝塔面板后样式丢失问题详解在将Django项目部署到宝塔面板后，可能会遇到样式丢失的问题，这...

xml怎么显示隐藏行 Apr 02, 2025 pm 11:45 PM

在 XML 中隐藏行有两种常见方法：使用 CSS 中的 display 属性设置为 none使用 XSLT 通过条件复制来跳过隐藏行

xml怎么显示界面的内容 Apr 02, 2025 pm 11:48 PM

XML广泛用于构建和管理用户界面，它通过以下步骤定义并显示界面内容：定义界面元素：XML使用标记定义界面元素及其属性。构建层次结构：XML根据层级关系组织界面元素，形成树状结构。使用样式表：开发者使用CSS或XSL等样式表语言指定元素的视觉外观和行为。渲染过程：浏览器或应用程序使用XML解析器和样式表解析XML文件并渲染界面元素，使其在屏幕上可见。