CSS实用方法 —— 三角形的编写

CSS3出现后，很多设计图我们都可以使用css实现，今天我们一起讨论一下使用css实现三角形。

当我们设置三角形的时候通常是直接些border而把width和height设置为0；接下来我们尝试一次为四边设置不同的颜色，

.test-border{width:0px;height:0px;border-top:50px solid #ff0000;border-bottom: 50px solid #00a000;border-right:50px solid #ff00ff;border-left:50px solid #ffff00;
}
复制代码

可以看出上面的代码效果为四个不同颜色的三角形，但是我们通常是需要其中一个，那怎么处理呢？这里需要的就是用到css样式值；transparent【透明】

修改一下上面的代码，将其他三边的颜色设置成transparent；即可得到一个三角形；效果如下；

代码：

.test-border{margin:10px;width:0px;height:0px;border:50px solid transparent;border-right-color:#ff0000;}
复制代码

那么试想一下我们去掉一个边会是什么效果呢？

.test-border{width:0px;height:0px;border-top:50px solid #ff0000;border-bottom: 50px solid #00a000;border-left:50px solid #ffff00;
}
复制代码

看一下效果吧。

那么现在我们再去掉一个边呢？

.test-border{width:0px;height:0px;border-top:50px solid #ff0000;border-left:50px solid #ffff00;
}
复制代码

效果如下：

那么看到这个效果。我们再结合transparent属性值，我们就可以轻松的实现下面这个效果了。

.test-border{margin:10px;width:0px;height:0px;border-top:50px solid #ff0000;border-right:50px solid transparent;}
复制代码

转载于:https://juejin.im/post/5b769f07e51d45665f302202

CSS实用方法 —— 三角形的编写相关推荐

Qt实用技巧：VS2017编写纯C库以及使用Qt调用C库方法
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/ ...
ipa解包打包工具_ios打包ipa的四种实用方法(.app转.ipa)
总结一下,目前.app包转为.ipa包的方法有以下几种: 1.Apple推荐的方式,即实用xcode的archive功能 Xcode菜单栏->Product->Archive->三选 ...
html5 css 三角形,css怎么画三角形？
css怎么画三角形?下面本篇文章就来给大家介绍一下使用CSS画三角形的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么画三角形? 三角形实现原理:宽度width为0: ...
ios打包ipa的四种实用方法(.app转.ipa)
[原]ios打包ipa的四种实用方法(.app转.ipa) 总结一下,目前.app包转为.ipa包的方法有以下几种: 1.Apple推荐的方式,即实用xcode的archive功能 Xcode菜单栏- ...
html div三角形,css+div打造三角形(箭头)
在很多网站都见过这样的箭头 ,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个 ...
UIautomator2：APP自动化测试方法与小技巧记录（文末附实用APP测试脚本编写模板）
uiautomator2是一个python的用来自动化操作手机的库,可用于APP自动化测试.就笔者的使用体验,比appuim更稳定.易用.本文以大家最常用的APP:微信为例子,记录uiautomato ...
使用CSS画一个三角形
效果图全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...
【原】ios打包ipa的四种实用方法(.app转.ipa)
原文地址为: [原]ios打包ipa的四种实用方法(.app转.ipa) 总结一下,目前.app包转为.ipa包的方法有以下几种: 1.Apple推荐的方式,即实用xcode的archive功能 Xc ...
网站推广的100个实用方法
网站推广的100个实用方法网站推广是每一位站长都迫切关心的事情.现在我们整理了常见的100个推广创意,大家根据自身的能力条件和外部环境,挑自己喜欢的适用的手法来用,希望对各位站长有所帮助. 1 ...

CSS实用方法 —— 三角形的编写

CSS实用方法 —— 三角形的编写相关推荐

最新文章

热门文章