알러트 모양( 삼각 판넬 안에 느낌표 ) css와 dom으로 만들기

과거 자바스크립트 알러트나 또는 알림 레이어등에

표시되는  삼각형 모양 안의 느낌표 이미지

이미지로 만들면 되지만 스케일을 키우거나 해야하는 상황이 생긴다면

이미지이기에 매끄럽지 않게 나옵니다

대안으로는 폰트등을 이용한 폰트어썸등의 css를 가져다 사용해도 되지만 

아래와 같은 방법으로 css와 html코드를 사용하면  문서 확대 축소에 따른 변화에도 크게 어그러짐 없이

원하는 모양 그대로 표현하게 됩니다

아래는 예제이며 그 안에 사용된 주황색의 삼각형에 느낌표가 만들어진 css를 통한 이미지입니다

만드는 방식은 아래와 같습니다

1. 위와 같이 각 모서리에 둥그런 도형 3개를 위치 시키고 

2. 6각형의 모서리가 각진 도형을 css의  clip-path: polygon 을 이용해 그려줍니다

각각의 위치와 선을 잘 맞추는게 핵심입니다 눈대중으로 선을 맞췄기에 조금 거슬리지만 같은 색으로 덧 입히면 하나의 덩어리로서 보기에 크게 어색함이 없습니다

3. 그 위에 느낌표 도형을 위치 시켜줍니다

4. 이미지의 크기는 scale(0.7); 와 같이 스케일의 크기를 통해 조절하면 됩니다 

   그렇지 않고 높이와 넓이를 조절하면 나머지도 일일이 조절해주고 제일 힘든 polygon 위치를 맞춰줘야

   되기에 사용함에 큰 지장이 없다면 스케일을 통해 사용하시면 됩니다

아래는 소스입니다 

-------------------------------------------------------------------------------------------------------------

<style> 
/*알러트 주의 표시:: 삼각형 판넬 안에  느낌표*/
.alert_shape { position: relative; width: 100px; height: 90px; transform: scale(0.7); background: #fff; }
.alert_shape .circle1 { position: absolute; top: 0; left: 42.5px; width: 15px; height: 15px; border-radius: 50%; background: #ff6633; }
.alert_shape .circle2 { position: absolute; top: 75px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #ff6633; }
.alert_shape .circle3 { position: absolute; top: 75px; left: 85px; width: 15px; height: 15px; border-radius: 50%; background: #ff6633; }
.alert_shape .alert-triangle { position: absolute; top: 0; left: 0; width: 100px; height: 90px; background: #ff6633; 
clip-path: polygon(43.7% 4%, 56.5% 4%, 99.2% 88%, 92.6% 100%, 10.9% 105.7%, 0.9% 87.6%); }
.alert_shape .exclamation { position: absolute; top: 8px; left: 39px; font-weight: bold; 
font-size: 68px; color: #fff; user-select: none; line-height: 1; }
.alert_shape .shape1 { position: absolute; top: 25px; left: 7px; width: 8px; height: 30px; background: #fff; border-radius: 10px; }
.alert_shape .shape2 { position: absolute; top: 60px; left: 7px; width: 8px; height: 8px; background: #fff; border-radius: 10px; }

</style>
<div class="alert_shape">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="alert-triangle"></div> 
    <div class="exclamation">
        <div class="shape1"></div>
        <div class="shape2"></div>
    </div>
</div>

-----------------------------------------------------------------------------------------------------

두가지 형태의 페이지 로딩 [ 로딩중, 로딩 프로그레스바 ]

https://sir.kr/pg_tip/17284?sca=JavaScript&page=2

CSS CSS 스위치형 버튼

https://sir.kr/pb_lecture/1508