按键采用尖锐的边缘和阴影 [英] Button with pointed edges and shadow
问题描述
我试图做一个 CSS按钮即可。正如你可以看到下面，我不能创造的角落第二HTML元素的渐变。通常我会用边界或只需旋转元素来创建一个梯度的三角形，但问题是，我的三角形不是一个90度方。
预期的设计：（灰度，视网膜200％缩放）
我的CSS按钮：（蓝，视网膜200％缩放）
有没有更好的方式来创建这个按钮与CSS？
http://jsfiddle.net/G8ZBz/ 或只是阅读下面：
HTML的code
＆LT; DIV CLASS =按钮＆GT;
＆LT; DIV CLASS =按钮，内有＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
CSS
.button {
宽度：225px;
高度：60像素;
背景：＃2983d2;
}
.button：前{
位置：绝对的;
宽度：0像素;
高度：0像素;
左：-13px;
内容：;
显示：块;
边境顶：30PX固体透明;
下边框：30PX固体透明;
边框右：13px的固体＃2983d2;
}
.button：{后
位置：绝对的;
宽度：0像素;
高度：0像素;
顶部：0;
右：-13px;
内容：;
显示：块;
边境顶：30PX固体透明;
下边框：30PX固体透明;
左边框：13px的固体＃2983d2;
}
.button .button，里面{
位置：相对;
宽度：221px;
高度：55像素;
保证金左：2px的;
背景：＃469bf9; / *旧的浏览器* /
背景：-moz线性梯度（顶，＃469bf9 50％，＃1e80f7 50％）; / * FF3.6 + * /
背景：-webkit梯度（线性，左上，左下，色停止（50％，＃469bf9），颜色停止（50％，＃1e80f7））; / *铬，Safari4 + * /
背景：-webkit线性梯度（顶，＃469bf9 50％，＃1e80f7 50％）; / * Chrome10 +，Safari5.1 + * /
背景：-o-线性梯度（顶，＃469bf9 50％，＃1e80f7 50％）; / *歌剧11.10+ * /
背景：-ms线性梯度（顶，＃469bf9 50％，＃1e80f7 50％）; / * IE10 + * /
背景：线性梯度（向底部，＃469bf9 50％，＃1e80f7 50％）; / * * W3C /
}
.button .button-内：{前
位置：绝对的;
宽度：0像素;
高度：0像素;
左：-13px;
内容：;
显示：块;
边境顶：30PX固体透明;
下边框：30PX固体透明;
边框右：13px的固体＃1e80f7; / *应该梯度* /
}
.button .button-内：{之后
位置：绝对的;
宽度：0像素;
高度：0像素;
顶部：0;
右：-13px;
内容：;
显示：块;
边境顶：30PX固体透明;
下边框：30PX固体透明;
左边框：13px的固体＃1e80f7; / *应该梯度* /
}
您可以使用的歪斜财产使扁平三角形。
在你的情况，我会使用歪斜（）属性和背景的阴影，使在底边框的效果：
输出：
以下图像解释什么是什么以及如何每个元素，伪构件和背景阴影被用于形成该按钮。伪元素和背景阴影，以尽量减少标记：
的 HTML 的
＆LT; DIV CLASS =键顶＆GT;
＆LT; DIV CLASS =按钮下方＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
的 CSS：的
.TOP {
位置：相对;
保证金左：150像素;
宽度：225px;
高度：60像素;
}
.button：之前，.button：{后
位置：绝对的;
宽度：70％;高度：50％;
内容：;
的z-index：-1;
}
.TOP：前{
左：0;顶部：0;
-webkit-变换：如果skewX（-20deg）;
-ms变换：如果skewX（-20deg）;
变换：如果skewX（-20deg）;
背景：＃469BF9;
箱阴影：-5px 10px的0像素-5px＃104f96;
的z-index：-2;
}
.TOP：{后
右：0;顶部：0;
-webkit-变换：如果skewX（20deg）;
-ms变换：如果skewX（20deg）;
变换：如果skewX（20deg）;
背景：＃469BF9;
箱阴影：为5px 10px的0像素-5px＃104f96;
的z-index：-2;
}
.bottom：前{
左：0;顶部：50％;
-webkit-变换：如果skewX（20deg）;
-ms变换：如果skewX（20deg）;
变换：如果skewX（20deg）;
背景：＃1E80F7;
箱阴影：-4px为5px 0像素0像素＃104f96;
}
.bottom：{后
右：0;顶部：50％;
-webkit-变换：如果skewX（-20deg）;
-ms变换：如果skewX（-20deg）;
变换：如果skewX（-20deg）;
背景：＃1E80F7;
箱阴影：4PX为5px 0像素0像素＃104f96;
}
您还可以检查此 codePEN 有一些不同三角形。
I'm trying to make a CSS button . As you can see below, I'm not able to create a gradient for the second HTML-element for the corners. Normally I would use borders or simply rotate a element to create a triangle with a gradient, but the problem is that my triangle isn't a 90 degree square.
Desired design: (Grayscale, retina 200% zoomed)
My CSS button: (Blue, retina 200% zoomed)
Is there a better way to create this button with CSS?
http://jsfiddle.net/G8ZBz/ or simply read below:
HTML-code
<div class="button">
<div class="button-inside"></div>
</div>
CSS
.button {
width: 225px;
height: 60px;
background: #2983d2;
}
.button:before {
position: absolute;
width: 0px;
height: 0px;
left: -13px;
content: "";
display: block;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 13px solid #2983d2;
}
.button:after {
position: absolute;
width: 0px;
height: 0px;
top: 0;
right: -13px;
content: "";
display: block;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 13px solid #2983d2;
}
.button .button-inside {
position: relative;
width: 221px;
height: 55px;
margin-left: 2px;
background: #469bf9; /* Old browsers */
background: -moz-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#469bf9), color-stop(50%,#1e80f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* IE10+ */
background: linear-gradient(to bottom, #469bf9 50%, #1e80f7 50%); /* W3C */
}
.button .button-inside:before {
position: absolute;
width: 0px;
height: 0px;
left: -13px;
content: "";
display: block;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 13px solid #1e80f7; /* should be a gradient */
}
.button .button-inside:after {
position: absolute;
width: 0px;
height: 0px;
top: 0;
right: -13px;
content: "";
display: block;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 13px solid #1e80f7; /* should be a gradient */
}
You can use the skew property to make flat triangles.
In your case, I would use the skew() properties and background-shadows to make the bottom border effect :
Output :
The following image explains what is what and how each element, pseudo elements and background-shadows are used to form the button. Pseudo elements and background-shadows are used to minimize markup:
HTML :
<div class="button top">
<div class="button bottom"></div>
</div>
CSS :
.top{
position:relative;
margin-left:150px;
width: 225px;
height: 60px;
}
.button:before, .button:after{
position: absolute;
width:70%; height:50%;
content: "";
z-index:-1;
}
.top:before {
left:0; top:0;
-webkit-transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
transform:skewX(-20deg);
background: #469BF9;
box-shadow: -5px 10px 0px -5px #104f96;
z-index:-2;
}
.top:after {
right:0; top:0;
-webkit-transform:skewX(20deg);
-ms-transform:skewX(20deg);
transform:skewX(20deg);
background: #469BF9;
box-shadow: 5px 10px 0px -5px #104f96;
z-index:-2;
}
.bottom:before{
left:0; top:50%;
-webkit-transform:skewX(20deg);
-ms-transform:skewX(20deg);
transform:skewX(20deg);
background: #1E80F7;
box-shadow: -4px 5px 0px 0px #104f96;
}
.bottom:after{
right:0; top:50%;
-webkit-transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
transform:skewX(-20deg);
background: #1E80F7;
box-shadow: 4px 5px 0px 0px #104f96;
}
You may also check this codepen with a few different triangles.
这篇关于按键采用尖锐的边缘和阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
