.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>
由于透明边框也是可点击的,所以目前不会通过点击测试。
目标
>打击框(可点击/可旋转区域)需要坚持形状的边界(这里的透明边框也可以悬停,使其无效)。
>我需要显示各种内容(图像,渐变,文本…)的形状,
问题
在操作这种形状时,我遇到的主要问题是:
>具有根据其所指元素的位置(上/左/右/下侧)移动三角形围绕语音气泡的能力,
>当需要重点时,在其周围添加边框或盒子阴影
有没有解决这些问题?
@H_404_22@解决方法
首先,
使用伪元素来避免额外的元素
您可以使用伪元素删除额外的.triangle div。这不仅可以减少您的div数量,还可以帮助定位,您可以使用顶部:left:right:和bottom:css属性,以便根据您的主要元素进行定位。这可以在下面看到:
.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>
仅当平方或主要元素悬停时才会显示指针。
但是,挂起来,这弄乱了定位?你怎么处理呢?
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>
添加边框
您可以很容易地添加一个边框,只需在主元素中添加边框声明,并将伪元素的边框底部和边框右边设为继承
边境
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>
放在一起
您还可以使用border-radius属性再次添加边框半径到消息框或语音气泡:
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>
如果您遇到内容溢出并被隐藏在这个伪元素后面的问题,并且您不用担心边框,可以使用负z指数来解决这个问题。
不喜欢使用“魔术数字”?
如果你不喜欢使用calc值的想法,其中我的答案中的定位正在使用(在工作时),你可能希望使用transform:translate(50%)
这将是一个更好的方法,因为:
>你不需要知道边框的大小,也不需要知道宽度的一半
>您将在其定位中使您的消息框/泡沫更加动态,并且将支持更多的说明。
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>@H_404_22@ @H_404_22@