삼각형을 달성 CSS3 경계

기타 2019-06-20 15:11:28 독서 시간: null

(1) 경계 삼각형

의 국경으로 삼각형을 적어 보자.

사각형 인 경우, 우리는 측면을 쓰기 국경을 사용됩니다,하지만 우리는 국경 경계 속성을 추가 제공 할 수없는, 삼각형 자체가 국경 논의하기 위해 여기에 있습니다, 그래서 우리는 다른 방법을 사용해야합니다.

생각하는 대부분의 경우는 오버레이입니다. 내부 삼각형 내부의 절대 위치, 상기 아이디어는 두 개의 삼각형 중첩 국경의 원하는 색으로 설정 약간 큰 외부 삼각형 색이다. 아티팩트 삼각형의 테두리와 일체로 형성 될 수있다.

여기서 절대 위치와 관련된 문제는 네 가지 종류의 방향에 대하여, 상하 좌우 삼각형 상위의 다른 위치이다. 위치가 0 일 때 처음에 우리는,보고 (:; 최고 0 픽셀 : 왼쪽 0 픽셀), 무슨 일이 일어날 때.

HTML :

<!-- 向上的三角形 -->
<div class="triangle_border_up">
    <span></span>
</div>
                                                      
<!-- 向下的三角形 -->
<div class="triangle_border_down">
    <span></span>
</div>
                                                      
<!-- 向左的三角形 -->
<div class="triangle_border_left">
    <span></span>
</div>
                                                      
<!-- 向右的三角形 -->
<div class="triangle_border_right">
    <span></span>
</div>

CSS :

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:0px;
    left:0px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:0px;
    left:0px;
}

효과는 같다 :

왜 우리는 아래의 그림과 같이 예상하지 않는다

그 이유는 우리가 지역에 정말 만족하지 않고, 아래의 CSS 박스 모델의 내용을 기억하시기 바랍니다있다, 삼각형의 측면입니다 볼 수 있다는 것입니다.

절대 위치 (위치 : 절대)가, 상위 콘텐츠의 경계층의 상대 위치에 기초하여 계산된다.

우리가 빈 DIV 0의 폭과 높이를 쓴 문서의 시작 부분과 결합 :

빈 DIV는 내용의 중심 위치에, 삼각형의 내부 지점 위치의 중심이다.

순서는 더 명확하게보고, 우리는 그림자 범위를 추가, 마지막을 사용 :

box-shadow:0 0 2px rgba(0,0,0,1);

효과는 같다 :

 

삼각형 포인트 내 우리가 분명히 알고있는이 시간, 우리의 육안의 삼각 경계 위치보고보다는 찾습니다 외부 삼각형의 실제 내용을 기반으로합니다.

같은 HTML, CSS :

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:1px;
    left:-28px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:-29px;
    left:-28px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:-28px;
    left:1px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:-28px;
    left:-29px;

 

　효과는 같다 :

또한 도시 된 바와 같이 풍선, 삼각형을 작성한다 :

 

HTML :

<div class="test_triangle_border">
    <a href="#">三角形</a>
    <div class="popup">
        <span><em></em></span>纯CSS写带边框的三角形
    </div>
</div>

CSS :

.test_triangle_border{
    width:200px; 
    margin:0 auto 20px;
    position:relative;
}
.test_triangle_border a{
    color:#333;
    font-weight:bold; 
    text-decoration:none;
}
.test_triangle_border .popup{
    width:100px;
    background:#fc0; 
    padding:10px 20px; 
    color:#333;  
    border-radius:4px;
    position:absolute; 
    top:30px; 
    left:30px;
    border:1px solid #333;
}
.test_triangle_border .popup span{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #333; 
    position:absolute; 
    top:-10px; 
    left:50%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #fc0; 
    position:absolute; 
    top:1px; 
    left:-10px;
}

(2) 북동, 남동, 북서, 남서 삼각형 표현

노스 웨스트 (↖), 동북 쓰기 계속 (↗), 남서 (↙), 남동 (↘) 삼각형.

원리는 같습니다

 

필요한 삼각형을 작성하는 다른면을 각각 작성 개의 CSS를 가질 수있는 각 색의 분할에 의하면.

NW을 (↖) 예를 쓰기 :

HTML :

<div class="triangle_border_nw"></div>

 CSS (1)

.triangle_border_nw{
    width:0;
    height:0;
    border-width:30px 30px 0 0;
    border-style:solid;
    border-color:#6c6 transparent transparent transparent;
    margin:40px auto;
    position:relative;
}

CSS (2) 

.triangle_border_nw{
    width:0;
    height:0;
    border-width:0 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #6c6;
    margin:40px auto;
    position:relative;
}

효과의 CSS 두 종류로 표시됩니다 :

 

이들은 CSS 삼각형으로 작성되어,로 절단

(1) 경계 삼각형

(2) 북동, 남동, 북서, 남서 삼각형 표현

추천

출처blog.csdn.net/Candy_mi/article/details/91551770
추천
행
.netcoreapi 컨테이너와 컨테이너의 MySQL을 고정 표시기-구성
com.google.firebase.database.DatabaseException는 : 롱 타입 java.lang.String의 값을 변환하는 데 실패
국내 휴대전화 왕이 미국 통신사 시장 1위를 차지했지만 국내 휴대전화 4위는 아니다.
트랜잭션 격리 수준의 네 가지
오늘 chatgpt 시도
부하 분산
【FFMpeg】源码编译
우분투 sudo를 무료로 접착
자바 8 스트림 API - 어떤 상태 중간 동작을 보증 새로운 소스 수집합니까?
CF161BDiscounts
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com