Html 自定义形状周围的 CSS 框阴影?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12855529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS box shadow around a custom shape?
提问by suamikim
Hy there,
你好,
I need to create a div which looks like this:
我需要创建一个如下所示的 div:
What i've came up with so far is this: http://jsfiddle.net/suamikim/ft33k/
到目前为止我想出的是:http: //jsfiddle.net/suamikim/ft33k/
.bubble {
position: relative;
width: 80px;
height: 160px;
border: 1px solid #33A7F4;
border-radius: 9px;
margin: 100px;
-webkit-box-shadow: 0px 0px 20px 2px #33A7F4;
-moz-box-shadow: 0px 0px 20px 2px #33A7F4;
-ms-box-shadow: 0px 0px 20px 2px #33A7F4;
-o-box-shadow: 0px 0px 20px 2px #33A7F4;
box-shadow: 0px 0px 20px 2px #33A7F4;
}
.bubble:after, .bubble:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 17px solid transparent;
right: 100%;
}
.bubble-left:before {
border-top-color: #33A7F4;
border-right-color: #33A7F4;
top: 60px;
}
.bubble-left:after {
border-width: 16px;
border-top-color: black;
border-right-color: black;
top: 61px;
}
As you can see the "only" problem is the box-shadow around the tail of the bubble (the triangular arrow).
正如您所看到的,“唯一”的问题是气泡尾部(三角形箭头)周围的框阴影。
I've also tried to not use the before- & after-pseudo-classes but use a second div which only holds the triangle (with transformation, rotation, ...) but obviously that didn't lead me to no success neither.
我也尝试不使用之前和之后的伪类,而是使用第二个 div,它只包含三角形(带有转换、旋转等),但显然这并没有导致我没有成功。
A static picture is no option because the size of the rectangle itself and the position of the tail are both dynamic and can change during "runtime".
静态图片是不可选择的,因为矩形本身的大小和尾部的位置都是动态的,并且可以在“运行时”期间改变。
I've also came up with a solution where i create the border & the shadow with a dynamically gernerated svg. If no other option can be found i'm going to stick with this solution but it feels pretty strong like a "hack". I'm not posting this solution here because it involves 2 javascript-framworks (extjs & raphael) and this question should be about html & css. Nonetheless i could still provide it if someone is interested in it...
我还想出了一个解决方案,我用动态生成的 svg 创建边框和阴影。如果找不到其他选项,我将坚持使用此解决方案,但感觉就像“黑客”一样强大。我不会在这里发布这个解决方案,因为它涉及 2 个 javascript-framworks(extjs 和 raphael),这个问题应该是关于 html 和 css 的。尽管如此,如果有人对它感兴趣,我仍然可以提供它......
One last thing: Browser-compatibility is not that big a deal. If it's working in the latest versions of the big ones (firefox, chrome, opera, ie 10, ...) everything is fine ;)
最后一件事:浏览器兼容性不是什么大问题。如果它在最新版本的大版本(firefox,chrome,opera,ie 10,...)中运行,一切都很好;)
Thanks,
谢谢,
mik
米克
回答by Mark
回答by suamikim
It's probably not in your best interest to do this, I would leave it as is.
这样做可能不符合您的最佳利益,我会保持原样。
http://css-tricks.com/triangle-with-shadow/
http://css-tricks.com/triangle-with-shadow/
You can skip down to "The Double-Box Method" and it shows a very manual way of doing this using :before
and :after
(which you already used up making the bubble) with the help of transform
. If you really wanted to do this, you could float the arrow to the left and apply shadows through the pseudo elements.
你可以跳过了“两厢法”,它显示了这样使用非常手动的方式:before
和:after
(你已经用完使得泡沫)的帮助下transform
。如果您真的想这样做,您可以将箭头向左浮动并通过伪元素应用阴影。
回答by Mohammad Fathi MiMFa
You should use from filter
in your CSS then set the drop-shadow($yourshadow)
function for value. There is no difference to write shadow for filter: drop-shadow($yourshadow)
function or shadow: $yourshadow
as a property. You can write like below:
您应该filter
在 CSS 中使用 from然后drop-shadow($yourshadow)
为 value设置函数。为filter: drop-shadow($yourshadow)
函数或shadow: $yourshadow
作为属性编写阴影没有区别。你可以像下面这样写:
.shape1, .shape2{
transform: rotate(35deg);
background: yellow;
height: 100px;
width: 100px;
display: inline-block;
}
.myshape{
margin: 30px;
filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
}
<div class="myshape">
<div class="shape1"></div>
<div class="shape2"></div>
</div>
Enjoy...
享受...