简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 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의 비결은 테두리 부분이 투명하다는 것입니다. 내가 해결하려는 문제는 대화 상자 자...
    에서 2023-09-13 19:57:28
    0
    1
    210
    -webkit-mask 내부에서 방사형 그라데이션을 사용하여 3개의 투명한 구멍을 만들고 이미지를 유지하는 방법 저는 프로젝트를 진행 중이며 투명하게 만들기 위해 테두리에 임의의 구멍 3개가 있어야 하는 div를 만들어야 합니다. 내가 직면하고 있는 문제는 2개의 구멍에 대...
    에서 2023-09-02 21:32:42
    0
    2
    281
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！