css 질문 입니다.
본문
빨간 표시된 삼각형을 라운드 살짝 주고 싶은데 잘 안되네요
어떻게 주는 걸까요?
<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>
답변을 작성하시기 전에 로그인 해주세요.