首页 > 其他分享 >css实现空心三角形

css实现空心三角形

时间:2023-06-29 10:47:13浏览次数:34  
标签:style color 空心 width 8px 三角形 border transparent css

<div class="triangle"></div>
.triangle {
        width: 0;
        height: 0;
        border-style:solid;
        border-width: 0 8px 15px;
        border-color: transparent transparent #568CFC;
        position: relative;
}

.triangle::before {
        content: '';
        border-style: solid;
        border-width: 0 8px 15px;
        border-color: transparent transparent white;
        position: absolute;
        top: 1px;
        left: -8px;
}

 

标签:style,color,空心,width,8px,三角形,border,transparent,css
From: https://www.cnblogs.com/webway/p/17513406.html

相关文章

  • CSS文字换行之word-wrap和word-break的区别
    CSS文字换行之word-wrap和word-break的区别word-wrap:break-word;word-break:break-all;这两种都可以,区别在于英文场景中,当一个英文单词的长度超过了父级容器长度时,word-wrap:break-word没什么用,word-break:break-all会强制换行,使单词断开。......
  • 自用gulp打包脚本,压缩html,压缩js,压缩css,压缩图片,功能齐全
    constgulp=require('gulp');constfs=require('fs');consthtmlmin=require('gulp-htmlmin');constuglify=require('gulp-uglify');constuglifyEs=require('uglify-es');constminifyCSS=require(......
  • CSS:定位
    position属性position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即position属性主要有五个值。staticrelativefixedabsolutesticky下面主要介绍前四个常用的值。static属性值static是position属性的默认值。这时,浏览器会按照源码的顺序,决定每个元素的位......
  • CSS英文单词换行
    问题描述有的时候我们需要在页面上展示英文单词,但是有时单词的字母被独立出来形成不了一个整体。比如:使用element-ui中的el-table解决办法:使用css的一个属性,来根据单词进行换行。:deep(.el-table.cell){word-break:break-word;}......
  • CSS:Flex布局
    什么是Flex布局任何一个容器都可以指定为Flex布局。.box{display:flex;}基本概念采用Flex布局的元素,称为Flex容器(flexcontainer)容器默认存在两根轴:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis)。主轴的开始位置(与边框的交叉点)叫做mainstart,结束位置叫做main......
  • css border不能同时设置圆角和 border-image
    如标题,cssborder不能同时设置圆角和border-image,当我想要实现既有圆角,并给圆角加border-image的时候,发现无法同时生效,只有border-image会生效。 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatibl......
  • css屏蔽图片长按选中下载
    在移动端开发中,我们通常不希望页面的图片被长安选中可下载,会禁用图片选中事件,这时,css不能使用通配符全局设置 pointer-events:none; 否则会把所有点击事件禁用。解决方案img{box-sizing:border-box;-moz-user-select:none;-webkit-user-select:none;-ms-us......
  • CSS精灵技术
    一、CSS精灵需求: 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和......
  • CSS :last-child选中不了元素
    1.情况:当div:finaincingMark-right-item后还有div:sliderLine时,使用finaincingMark-right-item:last-child无法选中finaincingMark-right-item遍历后的最后一个div:finaincingMark-right-item,同时也没选中div:sliderLine,样式并不能选中任何一个div 2.解决:使div:finaincingMark-righ......
  • CSS中实现元素居中的七种方法总结
    在前端开发中,经常需要将元素居中显示,CSS提供了多种技术方法来实现元素的居中,在不同场景下有不同的使用方法、不同的效果,需要特别记住它们的应用场景才能够正常的居中。这篇文章就大致总结一下CSS中的居中方法。一、元素分类在CSS中,元素大致可以分为以下几种:1.块级元素(Block-l......