首页 > 其他分享 >【CSS】- 伪类绘制三角形

【CSS】- 伪类绘制三角形

时间:2023-02-01 09:34:51浏览次数:38  
标签:伪类 color 绘制 top lightseagreen 三角形 border CSS

  ::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    width: 0px;
    height: 0px;
    border: 10px solid transparent; /*以下四个样式对应四种三角形,任选其一即可实现*/
    /* border-top-color:lightseagreen; */
    /* border-left-color:lightseagreen; */
    /* border-right-color:lightseagreen; */
    border-bottom-color: #fff;
  }

  

标签:伪类,color,绘制,top,lightseagreen,三角形,border,CSS
From: https://www.cnblogs.com/minihu/p/17081442.html

相关文章

  • CSS边框渐变发光动画特效
    动画演示CSS代码 @property--rotate{syntax:"<angle>";initial-value:132deg;inherits:false;}:root{--card-height:65vh;--card-width:calc(var(--c......
  • js + css 按钮鼠标移动光晕 跟随
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • CSS & JS Effect – 画三角形 Triangle
    前言画三角形有什么用?可以做这样的Design  参考5WaysToCreateATriangleWithCSS BorderTriangle这应该是最远古的招数HTML<divclass="box"></di......
  • CSS 媒体查询
    CSS媒体查询是CSS3中的一个功能,允许您为不同的媒体类型(例如屏幕,打印机,语音合成器等)和媒体特征(例如屏幕大小,分辨率,方向等)设置不同的样式。例如,如果您想要仅在屏幕宽度不......
  • 零基础学前端之CSS精灵图
    我们学习CSS背景的应用——CSS 精灵图。什么是精灵图呢?先来看一个案例——在这个页面中,使用到了各种各样的小图片。如何在页面中插入这些小图片呢?你的思维惯性,一定是应用 ......
  • 零基础学前端之CSS背景
    假设这里有个div 容器,宽400,高300,默认情况下,这个div是没有背景的,或者说它的背景是透明的,我们拿一张图片实验一下就能看得出来,这个div在默认情况下,背景是透明的。也可......
  • 常用的CSS效果(1)
    单行省略overflow:hidden;text-overflow:ellipsis;white-space:nowrap;多行省略display:-webkit-box;overflow:hidden;......
  • css技巧篇(一)
    虚线:css自带的dashed虚线样式非常的有限。往往是不满足UI设计稿的需求的,这里可以使用渐变的方式实现:/**使用渐变来自定义虚线*/background:linear-gra......
  • 纯 CSS 绘图
    纯CSS绘图当我们需要三角形、圆形、半圆等简单图形时,用css直接绘制会比加载图片更好,通常可以使用border属性方法来绘制,目前主流的浏览器还可以使用clip-path属性......
  • nginx 子路径 网站图片或js/css 路径缺失 替换
     nginx子路径网站图片或js/css路径缺失替换location/test{rewrite^/test/(.*)$/$1break;proxy_passhttp://localhost:8080;sub_......