美文网首页
纯css画三角形,勾等形状

纯css画三角形,勾等形状

作者: _双眸 | 来源:发表于2018-12-06 19:29 被阅读36次

//三角形


1.png
.money-ul li.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 13px solid red;
    border-left: 15px solid transparent;
}

//勾


2.png
.money-ul li.active:before{
    content: '';
    position: absolute;
    width: 7px;
    height: 3px;
    background: transparent;
    bottom: 3px;
    right: 0px;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);
    z-index: 9;
}

相关文章

  • 纯css画三角形,勾等形状

    //三角形 //勾

  • 【转】用CSS画各种形状(一)

    本篇是以下两篇文章的转载和总结 纯CSS画基本形状用CSS画三角形,普通版,文艺小阴影版~ 1、画方形 2、画正圆...

  • css 实现三角形箭头

    插入DOM 使用伪类 参考:用纯CSS实现的箭头CSS画三角形原理css整理 -- 右箭头,上下箭头,三角形 这个...

  • css 画三角形

    分享一个纯css画三角形的链接: http://www.cnblogs.com/blosaa/p/3823695....

  • css实践

    一.纯css创建一个三角形的原理采用的是均分原理,把矩形分为4等份,这4等份其实都是边框 二.css3实现0.5p...

  • CSS画三角形、圆形、椭圆形总结

    CSS画正方形长方形很简单,本文就不说了。 一、三角形 1、CSS画等腰三角形 2、画直角三角形: 二、画圆形 注...

  • CSS画三角形/梯形

    用css画三角形或者梯形等图片主要是利用css中的border属性 正方形 ==>为一个div设置如下样式.tri...

  • clip-path属性

    运用clip-path的纯CSS形状变换clip-path练习 clip-path 可以用来裁剪你想要的形状一、图...

  • 纯CSS制作三角形!这个技巧你会么?

    在网页上做个三角形的形状,我想大部分人肯定第一个反应是用图片去实现这样的一个展示效果,但是其实使用纯css去写会更...

  • CSS画三角形原理

    使用纯CSS画三角形,记得去年自己就碰到过。但是当时只是一味的在网上粘贴复制了写代码,并没有深究其原理。今天特地写...

网友评论

      本文标题:纯css画三角形,勾等形状

      本文链接:https://www.haomeiwen.com/subject/kxhacqtx.html