css 질문 입니다.

css 질문 입니다.

QA

css 질문 입니다.

본문

2109067063_1684304726.5021.png

 

빨간 표시된 삼각형을 라운드 살짝 주고 싶은데 잘 안되네요

어떻게 주는 걸까요?

 

<style>

.help .wrap .speech-bubble { position:absolute; bottom:6.5rem; right:0.2rem; width:21.2rem;   }
.help .wrap .speech-bubble:after { content: ''; position: absolute; bottom: 0; left: 87%; width: 0; height: 0; border: 1rem solid transparent; border-top-color: #1d1d1d; border-bottom: 0; margin-left: -0.7rem; margin-bottom:-0.7rem; }

</style>

 

 

 

 

이 질문에 댓글 쓰기 :

답변 1


<style>
.help .wrap {
    position: absolute;
    width: 10em;
}
.help .wrap .speech-bubble {
    position: absolute;
    top: 0.3em;
    right: 2em;
    width: 1em;
    height: 1em;
    background-color: #1d1d1d;
    border-radius: 0.2em;
    transform: rotate(45deg);
}
.help .wrap .speech-items {
    position: absolute;
    top: 0.5em;
    background-color: #1d1d1d;
    border-radius: 0.3em;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.help .wrap .speech-items li {
    border-bottom: 0.1em solid #333;
}
.help .wrap .speech-items li:last-child {
    border-bottom: 0;
}
.help .wrap .speech-items a {
    display: block;
    padding: 0.8em;
    text-decoration: none;
    color: #fff;
}
</style>
<div class="help">
    <div class="wrap">
        <div class="speech-bubble"></div>
        <ul class="speech-items">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">Log out</a></li>
        </ul>
    </div>
</div>
답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT