zoukankan      html  css  js  c++  java
  • css怎么绘制箭头?

    在网页制作中,很多时候都会有箭头的情况,我们可以使用css来绘制箭头,css是如何绘制箭头的呢?下面我们来看一下使用css绘制箭头的方法。

    我们可以使用css绘制三角形来制作箭头。

    一、绘制三角

    html代码:

    <div></div>

    css代码:

    .container{
         0;
        height: 0;
        border: 50px solid;
        border-color: red yellow green blue;}

    利用border绘制了四个三角组成的矩形,现在要绘制三角形,只需要让其他任意三个三角形变为透明即可。
    修改代码:

    border-color: red transparent transparent transparent;

    效果图:

    豌豆资源搜索网站https://55wd.com 广州vi设计公司http://www.maiqicn.com

    二、绘制箭头

    利用三角绘制箭头,只需要再绘制一个和此三角大小相同,方向相同的三角,颜色和背景颜色一样,覆盖在此三角上面,通过少量的位移形成箭头。

    css样式:

    .container{
         0;
        height: 0;
        border: 50px solid;
        border-color: red transparent transparent transparent;
        position: relative;}.container::after{
        content: '';
        position: absolute;
        top: -55px;
        left: -50px;
        border: 50px solid;
        border-color: white transparent transparent transparent;}

    效果图:

  • 相关阅读:
    BeanUtils在web项目中的应用
    BeanUtils的日期问题
    使用BeanUtils组件
    调用数据库过程函数mysql
    sql注入
    如何取SO中的特性
    Read config detail from SO
    Parts-Ufida ERP project 1
    常用医疗英语
    April 24th 2020
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/13735360.html
Copyright © 2011-2022 走看看