워드프레스 말풍선 생성기 #2

워드프레스 말풍선을 쉽게 생성할 수 있는 온라인 도구입니다.
다양한 스타일을 선택하고 사용자 정의할 수 있습니다.

워드프레스 말풍선 생성기 #2 사용법

워드프레스에서 글을 쓰다보면 말풍선을 사용할 일이 많이 있습니다. 벌써 말풍선 생성기 2번째 도구를 만들었습니다. 내용을 강조하고 싶거나 뭔가 특별해 보이고 싶을 때 사용하면 좋은 툴입니다.

펭수의 워드프레스 꾸미기

by pengsu

말풍선을 만들어보세요.

텍스트

폰트

말풍선 위치

포인터 위치

Top Right Bottom Left

모 양

Symmetrical Right Left

포인터 크기

배경색상

텍스트색상

CSS Code

<style>
.speech-bubble {
    position: relative;
    background: #39959d;
    border-radius: .4em;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #39959d;
    border-bottom: 0;
    border-left: 0;
    margin-left: -10px;
    margin-bottom: -20px;
}
</style>

<div style="">
    <div class="speech-bubble">${g_state.텍스트}</div>
</div>

텍스트

폰트