이번에 만든 거.

다음 그림과 같은fuke dashi를 만듭니다.내용은 앞서 던진CSS에서 테두리 색상만 있는 fuke dashi 만들기의 후속 내용이다.
아래 고추냉이 수프 두 가지를 보세요.


제 생각에는 CSS에서 두 번째와 같은fuke dashi를 만드는 것은 흔한 상황인 것 같아요. 그런데 첫 번째처럼 화살표 모양이 특수한 상황은 어때요?
이번엔 CSS에서 이렇게 조금 이상한 퓨크 다시를 만드는 방법을 설명합니다.

데모

방법

1. 부조로 변신하고 싶은 요소 만들기

index.html

<div class="balloon">
    <!-- フキダシ文言を挿入 -->
</div>

index.css

.balloon {
    position: relative;
    width: 100px;
    height: 100px;
    background: #000000;
}

화살표는 애프터 요소로 배열되어 있기 때문에position:relative를 부여합니다.

2. 화살표 생성

index.css

.balloon:after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    content: '';
    border-top: 0;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #000000;
    margin: 0 0 0 -10px;
}

대체로 일반적인 붕어탕을 만들 때와 같지만 포인트는 border-top의 값이다.

border-top을 0으로 설정함으로써 상반부에 부족한 삼각형을 나타낸다.
※ 각 border의 값을 조정하면 미묘하게 변하는 삼각형을 나타낼 수 있습니다. 관심 있는 사람은 시도해 보세요.
그리고 top와 left로 화살표를 그리려는 위치를 조정하면 완성됩니다.

총결산

디자이너의 디자인을 바탕으로 HTML과 CSS의 인코딩을 할 때 나는 최대한 이미지로 표현하지 않으려고 신경을 많이 썼다.
"이 부분은 CSS로 만들 수 있지 않나요?"그렇게 생각하면서 계속 모색하다 보면 의외로 시도를 하게 되니까 많이 해보는 것을 추천합니다.
'고민이 지나쳐 시간이 없다'는 결말이 되면 아이가 아예 없으니 적당히 해야 한다.