css实现三角的一些方法

css实现三角没有想象中的那么难，只要明白border的各种属性的意思就很好明白css三角是如何实现的。

一下是几个很简单的例子：

css三角形状的制作：

css样式:

.triangle{

width:0;

height:0;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-top:10px solid red;

} 方法解释：定义左右两边边框透明，下边框不定义，上边框定义颜色即可

此种样式是上方样式的一种变种，只需将border-left:的宽度设置大一点，代码如下：

.triangle{

width:0;

height:0;

border-left:30px solid transparent;

border-right:10px solid transparent;

border-top:10px solid red;

}

同样可以实现左箭头或者右箭头，只需要设置 border-top/border-bottom 颜色为transparent，设置一下右边框的颜色即可

.triangle{

width:0;

height: 0;
border-top: 20px solid transparent;
border-bottom:20px solid transparent;
border-right:20px solid red;

}

这样的效果通过变样的方式也是可以实现的：左边颜色透明，上方和右方设置颜色，下方设置另外一种颜色

.triangle{
            width: 0;
            height: 0;
            border-width: 14px;
            border-style: solid;
            border-color: #ff1515 #ff1515 #920000 transparent;
        }

这样的三角和上面的三角的实现思路是一致的：

.triangle{

width:0;

height:0;

border-width:10px;

border-style:solid;

border-color:red red transparent transparent;

}

实现这种的带边框的三角，一般会用到两个标签div或者span i等随意的标签进行叠加，是可以实现的，还有一种算是投机取巧的方式如下：

使用2个◆符号来实现三角的形状

◆

◆

基本结构如下：

<div class="x">
 <a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。</a>
 ◆ ◆

</div>
.x{ width:180px; position:relative; background:#fff; border:1px solid #ccc; padding:10px; left:-4px; top:-4px;}/*内容div*/

.y , .z{position: absolute;left: 141px; }

.y{color: #ccc;font-size: 19px; top:-12px;z-index:1;}/*模拟小三角*/

.z{color: #fff;font-size: 19px;top:-11px; z-index:3;}/*模拟小三角*/

将z中的实心菱形显示在上方，遮盖在y的实心菱形上方，所看到的三角的边框，是y元素的颜色

转载于:https://www.cnblogs.com/xyhy/p/3865648.html

css实现三角的一些方法相关推荐

css 倒三角_倒三角结构：如何管理大型CSS项目
css 倒三角 by Luuk Gruijs Luuk Gruijs着倒三角结构:如何管理大型CSS项目 (The Inverted Triangle Architecture: how to ma ...
使用css制作三角，兼容IE6，用到的标签divsspan
使用css来制作三角,在日常用得较多.恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧. 我们分别写一个< ...
css 倒三角_【推荐收藏】10 个最佳实践来改良你的 CSS
前言 ❝ 正文从这里开始- 1. 你真的需要框架吗? 首先,决定是否真的需要使用 CSS 框架.现在,有许多替代轻量级健壮(robust)框架的方法.通常,你不需要使用框架中的所有选择器,所以你的包中 ...
html中三角向下符号,使用css实现三角符号效果
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
css怎么设置上三角,如何使用css实现三角符号（附代码）
本篇文章给大家带来的内容是关于如何使用css实现三角符号,代码有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在 ...
使用css实现三角符号
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
html中设置表格单实线,css实现表格实线的方法
css实现表格实线的方法发布时间:2020-08-21 14:46:18 来源:亿速云阅读:147 作者:小新这篇文章主要介绍了css实现表格实线的方法,具有一定借鉴价值,需要的朋友可以参考下. ...
css 图文上下居中,CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. Ver ...
yii 加载php文件,Yii2框架加载css和js文件的方法分析
本文实例讲述了Yii2框架加载css和js文件的方法.分享给大家供大家参考,具体如下: 1.第一步是要把我们的css.js文件放到web目录下 2.第二步修改assets/AppAsset.php文件 ...

css实现三角的一些方法

css实现三角的一些方法相关推荐

最新文章

热门文章