简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

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

WBOY
發布： 2016-06-24 11:22:56
原創
932 人瀏覽過

简述

在前面，我们分享过关于三角的实现方式，主要根据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>
    登入後複製

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

    相關標籤：
    CSS3之创建透明边框三角
    來源：php.cn
    上一篇：后端程序员前端之路06布局模型，颜色值，长度值_html/css_WEB-ITnose 下一篇：学习笔记1_html/css_WEB-ITnose
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    CSS：從具有投影的 Vuetify 對話框內的 div 中刪除投影 我有一個對話框，在div上使用CSS新增了一個三角形。但CSS的技巧是邊框的一部分是透明的。我試圖克服的問題是從透明邊框中刪除陰影，而不從對話框本身刪除陰影。將其添加到div不起作...
    來自於 2023-09-13 19:57:28
    0
    1
    210
    如何在 -webkit-mask 內使用 Radial-gradient 製作 3 個透明孔但保持影像 我正在開發一個項目，需要製作一個div，其邊框上必須有3個隨機孔，使其透明。我面臨的問題是，對於2個孔，我使用帶有徑向漸變的-webkit-mask來創建2個20px的透明孔。我的...
    來自於 2023-09-02 21:32:42
    0
    2
    281
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！