CSS实现三角形效果
类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果。这里讲一下是讲自己使用HTML+CSS实现三角形的方式。
为了能够熟悉的使用HTML+CSS构建三角形,我们首先要熟悉以下代码以及代码所实现的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shape</title>
<style type="text/css">
.shape{
height: 0;
width: 0;
border-top: 100px solid red;
border-right: 100px solid blue;
border-bottom: 100px solid yellow;
border-left: 100px solid green;
}
</style>
</head>
<body>
<div class="shape"></div>
</body>
</html
这是一个HTML页面,我们定义一个class=shape的元素,为元素设置宽度和高度均为0,上下左右的border为100px并且用不同颜色填充,最终会有以下效果:
可以观察到,上下左右的border都占有45度直角三角形区域,底为100px+100px,高为100px。
如果我们希望实现如下图的三角形形状:
我们可以保留如下图中1或者2的位置:
我选择1区域,最终CSS如下:
.shape01{
height: 0;
width: 0;
border-top: 100px solid transparent;
border-right: 100px solid blue;
}
其他情况类似。
CSS实现三角形效果的更多相关文章
- css自定义三角形效果
废话不说了,直接上代码 element{ width:0px; height:0px; border-left:10px; border-right:10px; border-bottom:10px; ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
随机推荐
- jdbc接口api
java.sql.* 和 javax.sql.* |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接口. |- connect(url, properties): ...
- Linux启动网卡时出现RTNETLINK answers: File exists错误解决方法
这里说一下,如果复制了虚拟机,设置新的MAC地址为什么? 在虚拟机的网络设置中--->高级.然后找到如下窗口,生成新的MAC地址即可. ----------------------------- ...
- iOS-OC命名规范
IOS开发(OC)中的命名规范 正文:通过读写大量代码我有自己的一套编程思路和习惯,自认为自己的编码习惯还是不错的,代码结构也算清晰,因为我一直以来都是代码看的多写的多,但是总结的比较少,知识经常不成 ...
- html标签引入外部html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- USB 0xC0000012 错误详解
0xC0000012Bus Hound 6.01 capture on Windows Vista Service Pack 1 (x86). Complements of www.perisoft. ...
- 玩转Google开源C++单元测试框架Google Test系列(转载)
越来越多公司采用敏捷开发,单元和回归测试越来越重要,GTest作为最佳C++单元测试工具越来越多的被使用.转自 http://www.cnblogs.com/coderzh/archive/2009/ ...
- 在Windows Azure上配置VM主备切换(1)——Linux篇
对任何一个上线系统来说,高可用设计是不可或缺的一个环节,这样才可以确保应用可以持续.稳定的运行,而不是频繁的掉线.停机.高可用设计的核心思路很简单,就是消除一切单点故障,将单点链路或者节点升级为多点. ...
- tomcat+redis实现session共享缓存
一:linux下redis安装 1.wget http://download.redis.io/releases/redis-3.2.4.tar.gz 2.tar xzf redis-3.2.4.ta ...
- 魅蓝Note2跑分 MT6753性能究竟如何
MT6753实力究竟如何? 采用LP工艺的MT6753实际上在性能和功耗方面并不比MT6752高,相反,同频下功耗要高1/3左右.并且其内存带宽是5.3G/s,小于MT 6752的6.4G/s 而且没 ...
- 最全SpringMVC具体演示样例实战教程
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先.导入SpringMVC须要的jar包. 2.加入Web.xml配置文件里关于SpringMVC的配置 <!--conf ...