css 生成三角形

1,生成有填充颜色的三角形

some-class {

  width: 0;

  height: 0;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  border-bottom: 40px solid red;

}

或者

some-class {

  width: 0;

  height: 0;

  border-width: 20px;

  border-style: solid;

  border-color: transparent transparent red transparent;

}

2,生成没有颜色填充的三角形

some-class {

  display: block;

  width: 5px;

  height: 5px;

  border-color: transparent transparent #fff #fff;

  border-style: solid;

  border-width: 2px;

  transform: rotate(-45deg);

}

时间: 2024-12-20 17:40:58

css 生成三角形的相关文章

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

看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不止一种呢:) 纯 CSS 做三角形的方法,目前我知道三种,分别是利用 border 属性,“◆”字符,和 CSS3 transfrom 做 45 度旋转实现的,CSS3的方法是在码头哥的博客上学到的,很感谢你们的分享,前端有你们更精彩! 1.利用 border 属性实现三角形 这个原理很简单,我我们

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left

经典CSS实现三角形图标原理解析

前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解: border边框语法: border 四条边框设置 border-left 设置左边框,一般单独设置左边框样式使用 border-right 设置右边框,一般单独设置右边框样式使用 border-top 设置上边框,一般单独设置上边框样式使用 border-bottom 设置下边框,一般单独设置

css制作三角形,下拉框三角形

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; } <div>

各种demo:css实现三角形,css大小梯形,svg使用

各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正方形的填充色. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&qu

CSS制作三角形和按钮

CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中,也会有这样的三角形 当鼠标经过时,三角形会垂直翻转,如下 现在我分享制作三角形的做法,主要是利用边框做成的 首先,四个三角形合并在一起的正方形,也就是正方形的四条边框形成的四个三角形 源代码: <!DOCTYPE html> <html lang="en"> <

利用div和css制作三角形效果

利用div和css制作三角形效果:本章节介绍一下如何利用div和css实现三角形效果,虽然看起来表神奇,但是原理是非常的简单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁

css制作三角形

css制作三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } #triangle-down {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-ri

前端特效: 使用CSS生成的闪光照相机效果

使用纯CSS生成的照相机效果, 相关CSS代码如下: .container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 5px; box-shadow: 0px 30px 50px -20px rgba(0, 0, 0, 0.7); -webkit-animation: 5s