웹 프론트엔드 CSS 튜토리얼 투명을 사용하여 삼각형 만들기

투명을 사용하여 삼각형 만들기

Mar 22, 2018 pm 02:26 PM
삼각형

이번에는 투명을 사용하여 삼각형을 만들 때의 주의 사항과 투명을 사용하여 삼각형을 만들 때의 실제 사례를 살펴보겠습니다.

렌더링은 다음과 같습니다

샘플 코드

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 40px auto;
            width: 60px;
            background-color: #f0ac6b;
        }
        .t1{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            /*background-color: #f0ac6b;*/
            border-bottom: 40px solid red;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        .t2{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            /*background-color: #f0ac6b;*/
            border-bottom: 40px solid transparent;
            border-right: 40px solid red;
            /*border-left: 20px solid transparent;*/
        }
        .t3{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        .t4{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 40px solid red;
        }
        .t5{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-right: 40px solid transparent;
        }
        .t6{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            border-left: 40px solid transparent;
            border-bottom: 40px solid red;
        }
        .t7{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-left: 40px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
        .t8{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-right: 40px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
    </style>
</head>
<body>
<p class="box">
    <p class="t1"></p>
    <p class="t3"></p>
    <p class="t2"></p>
    <p class="t4"></p>
    <p class="t5"></p>
    <p class="t6"></p>
    <p class="t7"></p>
    <p class="t8"></p>
</p>
</body>
</html>
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트에 주목하세요기타. 관련 기사!

추천 자료:

CSS3의 브라우저 호환성 문제

반투명 요소 설정

CSS3을 사용하여 분홍색 로그인 인터페이스 만들기

위 내용은 투명을 사용하여 삼각형 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

행렬식을 사용하여 삼각형의 면적을 계산하는 Java 프로그램 행렬식을 사용하여 삼각형의 면적을 계산하는 Java 프로그램 Aug 31, 2023 am 10:17 AM

소개 행렬식을 이용하여 삼각형의 면적을 계산하는 자바 프로그램은 세 꼭지점의 좌표를 주어 삼각형의 면적을 계산할 수 있는 간결하고 효율적인 프로그램이다. 이 프로그램은 Java에서 기본 산술 및 대수 계산을 사용하는 방법과 Scanner 클래스를 사용하여 사용자 입력을 읽는 방법을 보여주기 때문에 기하학을 배우거나 작업하는 모든 사람에게 유용합니다. 프로그램은 사용자에게 삼각형의 세 점 좌표를 묻는 메시지를 표시하고 이를 읽어 좌표 행렬의 행렬식을 계산하는 데 사용합니다. 행렬식의 절대값을 사용하여 면적이 항상 양수인지 확인한 다음 공식을 사용하여 삼각형의 면적을 계산하여 사용자에게 표시합니다. 이 프로그램은 다양한 형식의 입력을 받아들이거나 추가 계산을 수행하도록 쉽게 수정할 수 있으므로 기하학적 계산을 위한 다용도 도구가 됩니다. 행렬식의 순위

삼각형 형태로 구구단을 인쇄하는 C++ 프로그램 삼각형 형태로 구구단을 인쇄하는 C++ 프로그램 Sep 15, 2023 pm 01:21 PM

몇 가지 기본 곱셈 결과를 표나 그래픽 형식으로 기억하려면 곱셈표를 사용하세요. 이 기사에서는 C++를 사용하여 직각 삼각형처럼 보이는 구구단을 생성하는 방법을 소개합니다. 삼각 표기법은 많은 수의 결과를 쉽게 기억할 수 있는 소수의 경우에 효과적입니다. 이 형식에서는 테이블이 행별로, 열별로 표시되며 각 행에는 해당 열을 채우는 항목만 포함됩니다. 이 문제를 해결하려면 C++의 기본 루프 문이 필요합니다. 숫자를 삼각형 방식으로 표시하려면 각 줄을 하나씩 인쇄하는 중첩 루프가 필요합니다. 이 문제를 해결하는 방법을 살펴보겠습니다. 더 나은 이해를 위해 알고리즘과 구현을 살펴보겠습니다. 알고리즘은 우리가 원하는 곱셈표의 행 수, 즉 n을 취합니다. i가 1부터 n까지인 경우 다음을 수행합니다. 1부터 i까지의 j에 대해,

Java에서 밑면과 면적이 주어진 삼각형의 최소 높이를 찾는 방법은 무엇입니까? Java에서 밑면과 면적이 주어진 삼각형의 최소 높이를 찾는 방법은 무엇입니까? Aug 26, 2023 pm 10:25 PM

삼각형의 면적 'a'와 밑변 'b'가 있습니다. 문제 설명에 따라 Java 프로그래밍 언어를 사용하여 최소 높이 'h'를 찾아야 합니다. 우리가 알고 있듯이 밑변과 높이가 주어지면 삼각형의 넓이는 −$$\mathrm{area\:=\:\frac{1}{2}\:*\:base\:*\ : Height}$$ 위 수식을 이용하면 -height=(2*area)/base 에서 높이를 구할 수 있고, 내장된 ceil() 메소드를 이용하면 최소 높이를 구할 수 있습니다. 인스턴스-1의 중국어 번역을 보여주기 위해 몇 가지 예를 보여주십시오. 예-1 주어진 면적 = 12, 밑면 = 6이라고 가정하고 다음 공식을 사용하십시오.

화웨이 P70 외관 노출, 삼각형 모듈에 새로운 증거 추가 Art 불규칙한 모양 화웨이 P70 외관 노출, 삼각형 모듈에 새로운 증거 추가 Art 불규칙한 모양 Mar 05, 2024 pm 08:16 PM

이전에 화웨이의 P70 시리즈 5G 이미징 플래그십이 3월 말 출시될 예정인 것으로 알려졌으며, P70, P70Pro, P70Art 등 3가지 새로운 모델이 출시될 것으로 예상됩니다. 이제 이러한 새로운 휴대폰의 외관 디자인에 대한 자세한 정보가 공개되었습니다. 위 사진에서 볼 수 있듯이 최근 유출된 사진에 따르면 화웨이 P70 시리즈는 앞서 나온 루머와 동일할 것으로 보인다. P70과 P70Pro의 후면 모듈에는 삼각 데코가 적용될 것으로 예상된다. 위 그림), P70Art는 삼각형 Deco를 기반으로 하며 몇 가지 변경 사항이 더 강하고 불규칙합니다. 위는 @digitalchatstation이 공개한 Huawei P70 타사 휴대폰 케이스입니다. 화웨이 P70 시리즈가 이렇게 변한다면 여러분은 어떻게 생각하시나요? 역사정보

직사각형에 내접할 수 있는 가장 큰 삼각형의 넓이는 얼마입니까? 직사각형에 내접할 수 있는 가장 큰 삼각형의 넓이는 얼마입니까? Aug 30, 2023 pm 01:37 PM

직사각형은 반대쪽 변이 동일하고 평행한 사각형입니다. 인접한 변은 90°를 형성합니다. 삼각형은 세 변이 있는 닫힌 도형입니다. 직사각형에 새겨진 가장 큰 삼각형. 밑변은 직사각형의 길이와 같고 삼각형의 높이는 직사각형의 너비와 같습니다. Area = (½)*l*b 직사각형에 새겨진 가장 큰 삼각형의 면적 = (½)*l*b 직사각형 내에서 가장 큰 삼각형의 면적을 계산하는 프로그램 - 샘플 코드 #include<stdio. h>intmain(void){ intl= 10,b=9;

변의 길이가 주어지면 Java에서 삼각형의 유효성을 확인하는 방법은 무엇입니까? 변의 길이가 주어지면 Java에서 삼각형의 유효성을 확인하는 방법은 무엇입니까? Sep 09, 2023 pm 10:53 PM

우리 모두 알고 있듯이 삼각형은 3개의 변을 가진 다각형입니다. 세 개의 모서리와 세 개의 꼭짓점으로 구성됩니다. 세 내각의 합은 180도이다. 유효한 삼각형에서 두 변을 더하면 세 번째 변보다 커집니다. 문제 설명에 따라 Java 프로그래밍 언어를 사용하여 세 변이 주어지면 삼각형이 유효한지 확인해야 합니다. 그러므로 우리는 다음 세 가지 조건을 만족하는지 확인해야 한다. 만족하면 삼각형이 유효하고, 그렇지 않으면 삼각형이 유효하지 않습니다. a, b, c가 삼각형의 세 변이라고 가정합니다. a+b>cb+c>ac+a>b 몇 가지 예를 보여주세요 예 1 측면이 a=8, b=9, c=5인 경우 위 논리를 사용하면 a+b=8+9=17이 됩니다. 뭐

평면의 두 점이 동일 선상에 있을 경우 삼각형의 수는 얼마입니까? 평면의 두 점이 동일 선상에 있을 경우 삼각형의 수는 얼마입니까? Sep 05, 2023 pm 12:33 PM

n개의 점이 주어진 평면에서 삼각형의 수를 세는 방법과 동일 선상에 있는 점의 수를 2개 이하로 제한하는 방법을 살펴보겠습니다. 두 개 이하의 동일선상 점이 있는 평면에서 삼각형의 수를 세는 것은 컴퓨터 그래픽, 이미지 처리 및 기타 컴퓨터 과학 분야에 응용되는 계산 기하학의 일반적인 문제입니다. 예를 들어, 3D 그래픽의 3D 장면에서 2D 이미지를 생성할 때 동일선상 점이 2개 이하인 평면에서 삼각형을 계산하는 문제가 발생할 수 있습니다. 이 경우, 삼각형 계산 프로세스를 사용하여 3D 장면을 평면에 투영한 후 최종 2D 이미지에 얼마나 많은 삼각형이 존재하는지 확인할 수 있습니다. 이를 통해 장면의 복잡성을 파악하고 렌더링 속도를 높일 수 있습니다. 이미지 처리에서 우리는 이미지에 있는 고유한 개체나 모양의 수를 세고 싶을 수 있습니다.

삼각형 클래스를 통해 상속을 테스트하는 C++ 프로그램 삼각형 클래스를 통해 상속을 테스트하는 C++ 프로그램 Aug 26, 2023 am 09:57 AM

Triangle 클래스와 Isosceles라는 또 다른 하위 클래스를 만들고 싶다고 가정해 보겠습니다. Triangle 클래스에는 객체가 삼각형 유형임을 인쇄하는 기능이 있는 반면, Isosceles에는 이등변 삼각형임을 표시하는 두 가지 기능과 설명이 있습니다. 또한 Isosceles 클래스 객체를 통해 상위 클래스 함수를 호출해야 합니다. 적절한 입력이 없으면 적절한 방식으로 함수를 호출하면 됩니다. 따라서 입력이 trg라는 객체를 정의한 다음 trg.isosceles(), trg.description(), trg.triangle()을 호출하는 것이라면 출력은 이등변삼각형 안의 이등변삼각형이 될 것입니다.

See all articles