简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-06-24 11:22:56
Original
928 Leute haben es durchsucht

简述

在前面，我们分享过关于三角的实现方式，主要根据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>
    Nach dem Login kopieren

    代码比较简单，我就不过多阐述了！

    Verwandte Etiketten：
    CSS3之创建透明边框三角
    Quelle：php.cn
    Vorheriger Artikel：后端程序员前端之路06布局模型，颜色值，长度值_html/css_WEB-ITnose Nächster Artikel：学习笔记1_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    CSS: Schlagschatten aus Div im Vuetify-Dialog mit Schlagschatten entfernen Ich habe ein Dialogfeld mit einem Dreieck, das mithilfe von CSS zu einem Div hinzugefügt w...
    Aus 2023-09-13 19:57:28
    0
    1
    210
    So erstellen Sie 3 transparente Löcher mit Radial-Gradient in der Webkit-Maske, behalten aber das Bild bei Ich arbeite an einem Projekt und muss ein Div erstellen, dessen Rand drei zufällige Löcher...
    Aus 2023-09-02 21:32:42
    0
    2
    281
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！