纯CSS写三角形-border法

最新推荐文章于 2024-03-21 21:37:22 发布

Annkeke

最新推荐文章于 2024-03-21 21:37:22 发布

阅读量302

点赞数

分类专栏： css3

css3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

参考地址：http://www.cnblogs.com/blosaa/p/3823695.html

最近有做这种

.thirdsTrangleUp:after, .thirdsTrangleDown:after {

position: absolute;
content: '';
display: block;
width: 0;
height: 0;
left: 50%;
margin-left: -14px;
border-style: solid;

}

.thirdsTrangleDown:after {

top: -14px;
border-width: 0 14px 14px;
border-color: transparent transparent #fff;

}

.thirdsTrangleUp:after {

bottom: -14px;
border-width: 14px 14px 0;
border-color: #fff transparent transparent;
z-index: 3;

}

.thirdsContent:hover.thirdsTrangleDown:after {

border-color: transparent transparent #33437e;

}

更多的就参看顶部地址里面的例子

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Annkeke

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS：N种使用CSS 绘制三角形的方法

Yummy的博客

04-13

3万+

目录 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 2、使用 linear-gradient 绘制三角形 3、使用 conic-gradient 绘制三角形 4、transform: rotate 配合 overflow: hidden 绘制三角形 5、使用 clip-path 绘制三角形 6、利用字符绘制三角形 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的

纯CSS写三角形-伪类法

qq_33699819的博客

04-05

1296

HTML： <span></span> CSS： span:after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #555555; content: ""; position: re...

参与评论您还未登录，请先登录后发表或查看评论

用 css 或 js 实现多行文本溢出省略效果，考虑兼容性

青颜的天空的博客

07-13

926

单行： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //行数 overflow: hidden; 兼容： p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;} p::aft

三种纯CSS实现三角形的方法

lingjiuhun的专栏

11-12

1244

三种纯CSS实现三角形的方法发表于 2012/06/17 看到像上图这样的 tip 的小三角，你会怎么办？切个图上去？恩，不错，简单，兼容性也一级棒，不但好控制，那点小东西也增加不了多少图片的大小。但有没有更好更讲究技巧的办法呢？哈哈，那必须有啊，而且还不止一种呢：）纯 CSS 做三角形的方法，目前我知道三种，分别是利用 border 属性，“◆”字符，和

css空心三角的三种实现方式

vivid233的博客

12-11

3689

在做页面的时候经常会用到空心三角，这里总结一下我所知道的空心三角的三种实现方法。效果图：1. 图片（不推荐）还记得我第一次做这种效果的时候就是用了图片，ps出一个合适大小的三角图片，然后定位到需要的位置。现在想想真的是太蠢了。强烈不推荐这种方法。2. 特殊字符第一步画出大体的框，即demo;　　第二步设置字符大小并定位这里需要两个◆字符，大小相同，一个黑色一个白色，白色在黑色

CSS 三角——带边框的三角

qq_64133626的博客

08-20

4904

值得注意的是，right 值右移的距离值是 border 的两倍，要想使三角的边框和 div 边框一致，需要使三角组合得到的边框像素和 div border 像素一致，如果 div border 是1px，那么大的三角形和小的三角形边框差就需要为1px，大三角移动的距离和小三角移动的距离差则为2px，多运行几次代码即可理解。可以使用伪元素 before 和 after来做，其效果就相当于在标签的内部放置一个最前或者最后的标签，添加的标签可以继承父元素的属性，那么通过伪元素就可以组装出带边框的小三角。

解决纯css写三角形在firefox下的锯齿问题

12-13

相信很多人都用过利用border来实现小三角箭头，百度一下，这类的文章... border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明透明灰*/ margin:40px a

CSS绘制三角形的实现代码(border法)

09-22

在本文中，我们将深入探讨如何使用CSS中的`border`属性来绘制三角形。这种方法基于CSS盒模型中的边框理论，通过巧妙地调整边框宽度和颜色来创造出各种形状的三角形。首先，理解CSS边框的基本概念是关键。通常，...

用CSS代码绘制三角形 纯CSS绘制三角形的代码

12-30

1、新建一个元素，随便... border-color:#f00 #000 #f0f #00f;在FF下面显示效果如下：出现4个三角形合并成一个正方形。到这里就很清晰了，只要把想要的保留，其它的设置为透明就可以达到三角形的效果，那么：border:5

制作不同方向的三角形（border属性）

影子

07-29

372

border属性详解： border：10px solid red； border-width:10px; border-style:solid; border-color:red; 1、线性：solid（实线）dashed（虚线） dotted（点状线）doubble（双线）none/0（没有边框） 2、单一一个方向添加边框：border-right： 10px solid red； border-left/right/top/bottom 3、边框设置方法： border：solid-re.

html外边框设为虚线,科技常识：html设置虚线边框的方法

weixin_39670464的博客

06-05

2114

今天小编跟大家讲解下有关html设置虚线边框的方法，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html设置虚线边框的方法的相关资料，希望小伙伴们看了有所帮助。用到CSS样式和HTML标签元素为了对html不同标签加边框虚线我们选择几个常用标签对齐设置边框虚线效果。1、html常用标签p标签spanul litable tr td2、实例用到CSS属性单词borderwidthh...

十几个CSS高级常见技巧汇总（虚线框、三角形(1)，华为前端面试真题解析

最新发布

m0_60607245的博客

03-21

678

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。

通过CSS边框实现三角形和箭头

web前端开发教程htmlcssjs

11-15

513

一、CSS盒子模型盒子包括：margin、border、padding、content 边框交界处呈现平滑的斜线，利用此特点，通过设置各边框宽度和颜色可以得到小三角等。 div元素是块级元素，显示为块框，可以利用它来具体实现。 <div class="triangle "></div> <div class="arrow"></div> **例1...

css 3 的一些特性

qq_42417923的博客

06-03

280

css 3的一些特性，阴影 shadow动画 animation形变 transform渐变 gradient滤镜 filter 等。 三角形 利用 border-color支持 transparent这一特性，隐藏三条边框，实现三角形。 <style> .triangle { width: 0; height: 0; border-style: solid; box-sizing: border-box; border-width: 0 10px...

css画三角形

smallsun

06-17

889

用css怎么画一个三角形？

html+css+制作箭头,DIV+CSS通过border样式制作带箭头提示框效果

weixin_33632843的博客

06-10

561

带箭头样式的提示框，在很多的网站上都能见到这样的效果。通过自己动手写出来，觉得也不是什么难事。其实这个效果都是通过CSS中一个border样式就能做出来。归纳一下实现这个效果主要会用到border的这几个样式：border-style:边框的样式border-color:边框的颜色border-width:边框的宽度先实现这样的一个效果，看了就明白是怎么回事了：这段代码为：复制代码代码如下:pos...

CSS-border属性制作小三角

weixin_34247299的博客

12-05

151

1——三角向上下左上、右上、右下、左下这四个方向突出的样式向左上角突出: border-color: transparent transparent transparent #FFCC00; border-style:dashed dashed solid solid; border-width: 0 0 30px 30px ; 向右上角突出： bo...

canvas 文字颜色_给图形绘制阴影 --Canvas的基本操作

weixin_39884872的博客

11-28

251

在HTML5中，使用canvas元素可以给图形添加阴影效果。添加阴影效果时，只需利用图形上下文对象的几个关于阴影绘制的属性就可以了，如下所示：shadowOffsetX ——阴影的横向位移量shadowOffsetY——阴影的纵向位移量shadowBlur ——阴影的模糊范围shadowColor ——阴影的颜色shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y...

用border-color 的 transparent 制作一个三角形

桃花岛主的博客

02-19

1599

border-color可以把纤体哦分为四个三角形区域，上右下左，每个区域有一种颜色，如果把其他三个区域设定成透明色，就制作出来一个三角形 border-color:：[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ] 上右下左 border-color:transparent #f4f4f4 transparent transparent..