Home > Web Front-end > HTML Tutorial > CSS3之创建透明边框三角_html/css_WEB-ITnose

CSS3之创建透明边框三角_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:22:56
Original
986 people have browsed it

简述

在前面,我们分享过关于三角的实现方式,主要根据border属性来设置,下面我们来实现上、下、左、右各种不同颜色的三角。

  • 简述
  • 实现
  • 效果
  • 源码
  • 实现

    效果

    源码

    <!DOCTYPE html><html><head><style type='text/css'>/* 上三角 */.arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green;}/* 下三角 */.arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid orange;}/* 右三角 */.arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid blue;}/* 左三角 */.arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid silver;}</style></head><body>  <div class="arrow-up"></div>  <div class="arrow-down"></div>  <div class="arrow-left"></div>  <div class="arrow-right"></div></body></html>
    Copy after login

    代码比较简单,我就不过多阐述了!

    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template