zoukankan      html  css  js  c++  java
  • css直接写出小三角

    在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!
    先看看如何写出各种小三角!

     1          /*箭头向上*/
     2                 .arrow-up {
     3                         width:0; 
     4                         height:0; 
     5                         border-left:30px solid transparent;
     6                         border-right:30px solid transparent;
     7                         border-bottom:30px solid #000;
     8                 }
     9                         
    10                  /*箭头向下*/
    11                 .arrow-down {
    12                         width:0; 
    13                         height:0; 
    14                         border-left:30px solid transparent;
    15                         border-right:30px solid transparent;
    16                         border-top:30px solid #000;
    17                 }
    18                         
    19                  /*箭头向左*/
    20                 .arrow-left {
    21                         width:0; 
    22                         height:0; 
    23                         border-top:30px solid transparent;
    24                         border-bottom:30px solid transparent; 
    25                         border-right:30px solid #000; 
    26                 }
    27                    
    28                 /*箭头向右*/
    29                 .arrow-right {
    30                         width:0; 
    31                         height:0; 
    32                         border-top:30px solid transparent;
    33                         border-bottom: 30px solid transparent;
    34                         border-left: 30px solid #000;
    35                 }
    36                 
    37                 /*:after 伪元素在元素之后添加内容实现小三角*/
    38                 .box{ width:300px; height:300px; background:#838383; position:relative;}
    39                 .box:after{
    40                     position:absolute;
    41                     right:-20px;
    42                     top:10px;
    43                     display:block;
    44                     content:"";
    45                     width:0; 
    46                     height:0; 
    47                     border-top:20px solid transparent;
    48                     border-bottom: 20px solid transparent;
    49                     border-left: 20px solid #838383;
    50                 }
  • 相关阅读:
    Swift 正式开源, 包括 Swift 核心库和包管理器
    Swift 3 新特性
    iOS10 CoreData新特性
    iOS各个版本的新特性介绍
    iOS WKWebView详解
    Swift XML解析库
    ios辅助功能之voiceover实战
    iOS 内存管理机制和循环引用处理方法
    Swift 关键字汇总
    Swift 自动布局框架-SnapKit
  • 原文地址:https://www.cnblogs.com/kingplus/p/5581400.html
Copyright © 2011-2022 走看看