gpt4 book ai didi

javascript - 带有侧箭头的 CSS 方形 div

转载 作者:太空宇宙 更新时间:2023-11-03 22:40:50 27 4
gpt4 key购买 nike

我有一个包含图像的 div。此图像仅在元素悬停时显示,因此我希望侧箭头从指向侧面的 div 出来(在元素悬停的方向)。

此代码生成正方形 div:

 <div id="image-thumbnail-container">
<img id="image-thumbnail" class="arrow-right">
<div class="triangle"></div>
</div>

CSS:

#image-thumbnail-container {
display: block,
position: fixed,
padding: 4px,
border-radius: 5px,
}

#image-thumbnail {
display: block,
position: fixed,
border: 1px solid #000,
padding: 4px,
border-radius: 5px,
}

.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #ff0055;
}

这是我所拥有的示例(这不是代码生成的确切内容):

enter image description here

如何制作箭头和如何制作div没问题,但有没有办法将它们连接起来并使边框无缝衔接?如:

enter image description here

如果这对于它的值(value)来说太过分了,有没有一种既有箭头又有适合透明背景图像的漂亮背景的好方法?

谢谢!

最佳答案

尝试使用它。

.arrow{
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 250px;
height: 350px;
}
.arrow:after, .arrow:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
.arrow:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 36px;
margin-top: -36px;
}
<div class="arrow"></div>

关于javascript - 带有侧箭头的 CSS 方形 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44063042/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com