帶箭頭的語音氣泡我有一個(gè)項(xiàng)目需要插入語音氣泡/消息框..我想要達(dá)到的總體目標(biāo)是：.bubble { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; cursor:pointer;}.triangle { width: 0; border-top: 20px solid black; border-left: 20px solid transparent; border-right: 20px solid transparent; cursor:pointer;}<div class="bubble">Speech bubble</div><div class="triangle"></div>這目前沒有通過命中測試，因?yàn)橥该鞯倪吙蛞彩强牲c(diǎn)擊的。目標(biāo)命中框(可點(diǎn)擊/懸停區(qū)域)需要堅(jiān)持形狀的邊界(這里的透明邊界也是懸停的，使之無效)。我需要在不同的內(nèi)容上顯示形狀(圖像，食草動(dòng)物，文本.)，問題我在處理這個(gè)形狀時(shí)遇到的主要問題是：有能力在語音氣泡周圍移動(dòng)三角形根據(jù)它所指元素的位置(上/左/右/底)在需要強(qiáng)調(diào)時(shí)，在其周圍添加邊框或框影。是否有解決這些問題的辦法？
3 回答
30秒到達(dá)戰(zhàn)場
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊
使用偽元素避免額外的元素
.triangletop: left: right:bottom:
.oneAndOnlyDiv {
height: 100px;
width: 200px;
border: 3px solid gray;
background: lightgray;
position: relative;
}
.oneAndOnlyDiv:before {
content: "";
position: absolute;
top: 100%;
left: 20px;
width: 0;
border-top: 20px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
<div class="oneAndOnlyDiv">Main div</div>
命中測試
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor:pointer;}div:before {
content: "";
position: absolute;
top: 100%;
left: 20px;
height: 20px;
width: 20px;
background: black;
transform: rotate(45deg);
transform-origin:top right;}<div>Only element</div>
或者使用扭曲的偽元素：
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor:pointer;}div:before {
content: "";
position: absolute;
top: 90%;
left: 20px;
height: 30%;
width: 20px;
background: black;
transform: skewY(-45deg);
transform-origin:bottom left;
z-index:-1;}<div>Only element</div>
calc
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor:pointer;}div:before {
content: "";
position: absolute;
top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
top: calc(100% - 10px); /*i.e. half the height*/
left: 20px;
height: 20px;
width: 20px;
background: gray;
transform: rotate(45deg);}<div>Only element</div>
添加邊框
border-bottomborder-rightinherit
邊界
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor:pointer;
border:3px double black;}div:before {
content: "";
position: absolute;
top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
top: calc(100% - 10px); /*i.e. half the height*/
left: 20px;
height: 20px;
width: 20px;
background: gray;
transform: rotate(45deg);
border-bottom:inherit;
border-right:inherit;
box-shadow:inherit;}<div>Only element</div>
方框陰影：
:after
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor:pointer;
box-shadow: 5px 5px 10px 2px black;}div:before,div:after {
content: "";
position: absolute;
top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
top: calc(100% - 10px); /*i.e. half the height*/
left: 20px;
height: 20px;
width: 20px;
background: gray;
transform: rotate(45deg);z-index:-1;
box-shadow:inherit;}div:after{
box-shadow:none;
z-index:8;
}<div>Only element</div>
把一切都放在一起
還可以使用“邊框半徑”屬性將邊框半徑再次添加到消息框或語音氣泡中：
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor:pointer;
border:3px double black;
border-radius:10px;
}
div:before {
content: "";
position: absolute;
top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
top: calc(100% - 10px); /*i.e. half the height*/
left: 20px;
height: 20px;
width: 20px;
background: gray;
transform: rotate(45deg);
border-bottom:inherit;
border-right:inherit;
box-shadow:inherit;
}
<div>Only element</div>
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor:pointer;
border:3px double black;
border-radius:10px;}div:before {
content: "";
position: absolute;
top: -webkit-calc(100% - 13px); /*may require prefix for old browser support*/
top: calc(100% - 13px); /*i.e. half the height + border*/
left: 20px;
height: 20px;
width: 20px;
background: gray;
transform: rotate(45deg);
border:3px double transparent;
border-bottom:inherit;
border-right:inherit;
box-shadow:inherit;
border-radius:50%;}<div>Only element</div>
不喜歡用“魔法數(shù)字”？
transform:translate(50%)
您不需要知道邊框的大小，也不需要知道寬度的一半。 您將使您的消息框/氣泡的定位更加動(dòng)態(tài)，并將支持進(jìn)一步的大小。
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor: pointer;
border: 3px double black;
border-radius: 10px;
}
div:before {
content: "";
position: absolute;
top: 100%;
left: 30px;
height: 20px;
width: 20px;
background: gray;
box-sizing:border-box;
transform: rotate(45deg) translate(-50%);
border-bottom: inherit;
border-right: inherit;
box-shadow: inherit;
}
<div>Only element</div>
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor: pointer;
border: 3px double black;
border-radius: 10px;}div:before {
content: "";
position: absolute;
top: 100%;
left: 10%;
height: 20px;
width: 20px;
background: gray;
box-sizing: border-box;
transform: rotate(45deg) translate(-50%);
border-bottom: inherit;
border-right: inherit;
box-shadow: inherit;
transition: all 0.8s;}div:hover:before {
left: 90%;}<div>Only element</div>
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor: pointer;
border: 3px double black;
border-radius: 10px;}div:before {
content: "";
position: absolute;
top: 15%;
left: 100%;
height: 20px;
width: 20px;
background: gray;
box-sizing:border-box;
transform: rotate(45deg) translate(-50%);
border-top: inherit;
border-right: inherit;
box-shadow: inherit;
transition:all 0.8s;}div:hover:before{
top:80%;
}<div>Only Element</div>
div {
height: 100px;
width: 200px;
background: gray;
position: relative;
cursor: pointer;
border-radius: 10px;}div:before {
content: "";
position: absolute;
top: 70%;
left: 100%;
height: 20px;
width: 20px;
background: gray;
box-sizing:border-box;
transform: translate(-50%) skewX(45deg);
box-shadow: inherit;
transition:all 0.8s;
z-index:-1;}div:hover:before{
transform: translate(-50%);
border-radius:50%;
top:20%;
}<div>Only Element</div>
添加回答
舉報(bào)
0/150
提交
取消