文档章节

css三角形原理

羊皮卷
 羊皮卷
发布于 2016/12/13 22:00
字数 1259
阅读 22
收藏 1

前言:

  在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解:

border边框语法:

 

  • border 四条边框设置
  • border-left 设置左边框,一般单独设置左边框样式使用
  • border-right 设置右边框,一般单独设置右边框样式使用
  • border-top 设置上边框,一般单独设置上边框样式使用
  • border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用

基本用法:

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

推荐常用边框:

// 实线边框:solid
.solid { border: 1px solid #ff0000; }

// 虚线边框:dashed
.dashed { border: 1px dashed #ff0000; }

更多的边框值详见:W3C border-style 10种属性值

进入正题:

首先来看一下正常块元素设置四条不同颜色边框效果:为了效果明显,所有边框宽度均为50px;

上图 html 和 css 代码如下:

<div class="test-border">我是居中内容</div>

复制代码

.test-border {
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
    border-right: 50px solid #436eee;
    text-align: center;
}

复制代码

请各位记住四条边边框位置范围,这很重要。

接下来请在自己的大脑里面想象一下,当我去掉内容,效果显示会是什么样的?

再附上 html 代码,css代码同上没有任何变化

<div class="test-border"></div>

效果如下:

 是不是和你想的不一样?因为此处div是块级元素,所以 会撑满一行。接下来我们会将宽和高设置为0,看看效果又是什么样的呢?附上 html 和css 代码以及效果图:

<div class="test-border"></div>

复制代码

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
    border-right: 50px solid #436eee;
    text-align: center;
}

复制代码

俗话说,没有规矩,不成方圆。一定要养成书 CSS 代码规范,推荐参考 Bootstrap CSS书写规范,从现在做起。

我相信,看到上面效果图,距离我们实现三角形四个方向带箭头已经不远了,

如果我们将上图的下边框颜色设置为透明,即 border-right: 50px solid transparent;

效果如下:

如果我们我们去掉 border-right ,效果相信大家都能猜到,CSS 和 如下图所示:

复制代码

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
}

复制代码

备注:由于此时宽和高都设置为0,所以text-align: center 是多余的,去掉。

没错,就是这样的,和上面的透明的效果对比一下。

是不是离我们的三角箭头又更近一步了?此时有的人或许会想,我把上边框和下边框一起去掉不就是向右的三角箭头了?错,错,错,重要事情说三遍。请恕我卖个萌,当我们去掉上边框和下边框,此时盒子模型的高度是为0,无法将左边框撑高,我们将开不到任何东西,所以,不能将上边框和下边框宽度设置为0或者去掉。

当然,有的机智的小伙伴会说那我将上边框或者下边框去掉会怎么样?让我们去掉下边框试一试吧。CSS 和 效果如下所示:

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-left: 50px solid #ff7f50;
}

 

没错,效果就是这样,变成正方形了,等等我们是不是走错路了,现在的效果是不是我们的三角箭头原来越远了?那我们继续没有去掉border-bottom上来展开思考,

怎么样才能达到我们想要的效果呢?既不能去掉上边框也不能去掉下边框,我们可不可以隐藏上边框和下边框呢?秘密就在这儿。大家都知道css颜色有一个属性值 transparent 

如果我们将上边框和下边框的颜色设置成透明会怎么样?自己在慢慢想象一下,效果如下:

复制代码

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid #ff7f50;
}

复制代码

哇,这不就是传说中我们梦寐以求的向右的三角箭头么. 好神奇,我居然做到了。讲了这么多,请让我喝口水压压惊。

到这儿我们的css三角形图标原理解析快接近尾声了。接下来给出其余三个三角箭头 CSS 代码和效果图。

箭头向左:

复制代码

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 50px solid #436eee;
}

复制代码

箭头向下:

复制代码

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

复制代码

箭头向上:

 

复制代码

.test-border { 
    width: 0;
    height: 0;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

复制代码

 

到此就讲完了,很高兴和大家分享,如果你有好的知识点,希望您也和大家分享。如果有不对的地方,还请大家指正。

本文转载自:http://www.cnblogs.com/jack-chan/p/5024129.html

羊皮卷
粉丝 3
博文 164
码字总数 83410
作品 0
广州
前端工程师
私信 提问
css实现toolTip

title 1,常用border来实现三角形 原理: 宽高都不设置(即为0),只设置边框,如果4个边框都设置宽度(border-width),样式(border-style)和颜色(border-color) 效果如图 上面看到的都是三角形,其实...

funnycoderstar
2017/09/27
0
0
【CSS】画三角形

270924-106.jpg 用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透明。 image.png HTML代码: CSS代码: image.png HTML代码: CSS代码: ...

KelvinZ
2017/11/27
0
0
CSS 搞事技巧:border+transparent

介绍 出门忘带电源线,快递到了终于可以继续水文章了。好不容易获得一个面试机会,面试官很 Nice,可惜的是当时处于懵逼状态,错过了大好的机会: 面试官:巴拉巴拉吧…… 我:嗯,啊,这个,...

shanyuhai123
04/15
0
0
使用CSS的border属性绘制各种几何形状

前言 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。它不只是边框,它还有很多非常有用的“黑魔法”哈,让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单...

dazhi
02/25
0
0
浅析新浪微博:以css实现的小三角提示框

分析新浪微博就会发现一个有趣的带小三角提示框。先来看下效果图: 仔细查看代码才发现,并不是使用传统做法以图片的background属性实现,而是以两个"◆"菱形字符实现,这个菱形支持编码有G...

deep
2012/05/18
0
1

没有更多内容

加载失败,请刷新页面

加载更多

BlockLang 0.3.0 发布啦

BlockLang 官网:https://blocklang.com Block Lang 0.3.0 引入一个新概念:组件市场。 拼装软件时使用的零部件统称为组件。所有组件在组件市场中统一管理,包括 Block Lang 的内置组件。 组...

blocklang
今天
2
0
OSChina 周日乱弹 —— 请务必让我分担他们的痛苦!

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @clouddyy :分享石元丈晴的单曲《Why》: 《Why》- 石元丈晴 手机党少年们想听歌,请使劲儿戳(这里) @一代码哥 :当他妈狗屁的程序员,天天...

小小编辑
今天
579
7
php 遇到 No input file specified的解决方法

(一)IIS Noinput file specified 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.ini 找到 ; cgi.force_redirect = 1 去掉前面分号,把后面的1...

chenhongjiang
今天
11
0
MySQL 基础

一、常用命令 在命令行中,配置好环境变量后,通过cmd可以直接进入mysql命令行模式,同时列举几种常用命令 # 进入mysql数据库,密码可以先不写,打完-p后再输入,防止被别人看到mysql -u账...

华山猛男
今天
6
0
简单的博客系统(四)Django请求HTML页面视图信息--基于函数的视图

1. 编写用于查询数据的功能函数 应用目录 下的 views.py 文件通常用于保存响应各种请求的函数或类 from django.shortcuts import renderfrom .models import BlogArticles# Create your ...

ZeroBit
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部