css样式,背景渐变+图片,三角-实心-空心

渐变背景+背景图片

background: url("../../assets/images/index/arrowLeft.png") repeatno-repeat,linear-gradient(to bottom, $color44 10%, $color4, $color44 90%);

背景图匀速过度

@keyframes moveLeft {0% {background-position: 320px center;}100% {background-position: 0px center;}
}animation: moveLeft 5s linear infinite;

css画三角 -实心
实心三角一：

width:0;
height:0;
border:30px solid;
border-color: #f00 #ff0 #f0f #0ff;

实心三角二

<a class="a-after">

a.a-after::after {content: "";display: block;width: 0;height: 0;background: #f00;border-width: 0 20px 30px 20px;border-color: #000 #000 #f0f #000;border-style: solid;
}

实心三角三

    content: "";display: block;width: 10px;height: 10px;background: #f00;clip-path: polygon(0 0, 100% 50%, 0 100%,);//右clip-path: polygon(50% 0, 100% 100%, 0 100%); //上clip-path: polygon(50% 0,0 100%,10% 100%,50% 20%,50% 20%,85% 90%,10% 90%,10% 100%,100% 100%); //空心三角上

这个网站CSS clip-path maker你可以快捷地创建简单的 clip-path 图形

css画三角-空心

//html部分<div class="tabs"><span @click="tagSwitch(0)" class="hand"><span class="tabLeft" :class="{ activeTab: tagType == 0 }"></span><span class="tab-item" :class="{ activeTab: tagType == 0 }">业务类</span></span><span @click="tagSwitch(1)" class="hand"><span class="tab-item" :class="{ activeTab: tagType == 1 }">部门类</span><span class="tabRight" :class="{ activeTab: tagType == 1 }"></span></span></div>//data定义数据部分
tagType:0//css部分
.tabs {color: $-primary;font-weight: bold;position: relative;display: inline-block;margin: 40px 0 20px 0;.tab-item {padding: 6px 20px;border: 1px solid $-primary;}.activeTab {background-color: $-primary !important;color: #fff;}.tabLeft,.tabRight {position: absolute;display: inline-block;width: 24px;height: 24px;border-top: 1px solid $-primary;border-right: 1px solid $-primary;z-index: 99;background-color: #fff;margin-top: -1px;}.tabLeft {left: -12px;transform: rotate(-135deg);}.tabRight {right: -12px;transform: rotate(45deg);}
}

.staff_name_header::after {content: "";display: inline-block;width: 24px;height: 16px;background: linear-gradient(to bottom, #333 50%, transparent 0);background-size: 100% 4px;clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);vertical-align: middle;margin-left: 4px;}

css样式,背景渐变+图片,三角-实心-空心相关推荐

纯CSS实现背景渐变、球和阶梯的跳动
纯CSS实现背景渐变.球和阶梯的跳动作者:马光佳撰写时间:2019.1.17 开发工具与关键技术:MicrossftVisualStudio.animation与@keyframes的配合使用背 ...
CSS固定背景的图片
CSS固定背景的图片对于一些背景图片,当浏览器出现滚动条时,通常不希望图片随着文字的移动而移动,而是固定在某一位置. CSS通过background-attachment的值为fixed来实现. & ...
如何使用css样式将正方形图片显示为圆形图片布局
css3图片圆形显示如何使用css样式将正方形图片显示为圆形图片布局 1.图片实现圆形条件 2.使用布局技术 3.CSS圆角实现图片圆形实例 1.图片实现圆形条件原本不是圆形图片,通过CSS样式布局 ...
html自适应屏幕大小渐变背景色,CSS实现背景渐变和自动全屏的代码
CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题: 在设置了背景颜色渐变后好不容易调成了全屏覆盖但按下了F11的时候崩溃的世界开始了所以这篇文章主要介绍CSS背景渐变色 ...
CSS样式背景图片的自适应
今天在写一个页面的时候,需要用到一个背景图片. 于是我把背景图片放到static(静态文件夹)里面,于是在css样式中引入,但是背景图片又太大,最后的样式就是比例失调.但是由于太久没有用到这个属性了, ...
CSS 实现背景渐变透明
背景透明渐变 /* 第一个参数是渐变开始的位置 top 就是从上往下开始渐变,当然还有其他参数, eg: bottom第二个参数是rgba(0,0,0,1)0% 黑色, 透明度为1, 0% 表示渐变开 ...
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
文章目录博客内容介绍 input 全部类型 file 类型属性 accept属性 multiple属性事件监听 css样式更改上传图片文件,获取图片地址 input type file上传文 ...
html 图片的过渡效果,详解CSS背景渐变图片transtion过渡效果技巧
一.background-image不支持CSS3 transition background-image 不支持CSS3 transition ,而CSS3 gradient渐变作为背景图片存在的时 ...
css：css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...

css样式,背景渐变+图片,三角-实心-空心

css样式,背景渐变+图片,三角-实心-空心相关推荐

最新文章

热门文章