巧用css技巧实现三角符号

<html>
<head>
<title>巧用css技巧实现三角符号</title>
<style type="text/css">div{width:0;height:0;border:50px solid transparent;border-top-color:red;}
</style>
</head>
<body>
<div></div>
</body>
</html>

实现效果如下：

一个长宽都为0的框，它的四边其实是四个三角形。利用此特点，可以把其它三边的颜色都设为无色，以得到不同方向的三角形。关键代码如下：
div{
width:0px;
height:0px;
border:50px solid transparent;
border-top-color:red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}

但当我们把这个框的长宽都不设为0以后，发现图像变成了如下图所示。这样我们也可以得到不同方向的梯形。关键代码如下：
div{
width:50px;
height:50px;
border:50px solid transparent;
border-top-color:red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}

巧用css技巧实现三角符号相关推荐

HTML+CSS实现倒三角符号
在网页设计中通常需要实现倒三角符号的效果,比如下图当当网的搜索框: 那么,我们做出的最终效果是这样的: <!DOCTYPE html> <html> <head>& ...
css下拉框带三角符号_创建带有符号的下拉列表
css下拉框带三角符号 To make data entry easier, you can create a drop down list in an Excel cell, using data ...
css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
html中三角向下符号,使用css实现三角符号效果
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
css怎么设置上三角,如何使用css实现三角符号（附代码）
本篇文章给大家带来的内容是关于如何使用css实现三角符号,代码有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在 ...
使用css实现三角符号
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
css实用技巧：巧用css实现两栏等高布局
又到了利用碎片学习的时间了,看看这个小案例,超级实用的一个css技巧:css实现两栏等高布局. 样式方面: <style> #box{ width:900px; font-size:28p ...
10 个 GitHub 上超火的 CSS 技巧项目，找到写 CSS 的灵感！
大家好,我是你们的超级猫,一个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧 ???? ~ 简介一般人没事的时候刷刷朋友圈.微博.电视剧.知乎,而有些人是没事的时候 ...
前端必看的8个HTML+CSS技巧
点赞是动力 ??,关注是支持 ??! 建议.疑问.话题欢迎在评论区留言哦! CSS是一个很独特的语言.看起来非常简单,但是某种特殊效果看似简单,实现起来就颇有难度.这篇文章主要是给在学习前端的童鞋分享 ...

巧用css技巧实现三角符号

巧用css技巧实现三角符号相关推荐

最新文章

热门文章