形状有条纹背景和顶部的三角形切口
您好我需要在CSS / HTML5中制作形状。我将其粘贴为图像，但现在我需要制作这样的形状。
有什么办法吗？我用三角形制作了一些东西，但它甚至看起来都不是这样。
SHAPE：
这是我的CSS。
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
float:left;
}
#flag:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 25px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
HTML：
<div id="flag"></div><span>SOME TEXT HERE</span>
2 个答案:
答案 0 :(得分：4)
您可以使用以下两个选项之一来实现此目的。
选项1：使用box-shadow和额外的伪元素。
在此选项中，添加了一个大小为20px的额外伪元素（白色/灰色），并使用适当定位的盒阴影，实现条纹图案。如果标志元素的尺寸是固定的，则此方法很有用。
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
float: left;
overflow: hidden;
}
#flag:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 25px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
#flag:after {
content: "";
position: absolute;
top: 0px;
left: -30px;
height: 10px;
width: 150px;
background: #eee;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
box-shadow: -20px 60px 0px #eee, -20px 80px 0px #eee, -20px 20px 0px #eee, -20px -20px 0px #eee, 0px 40px 0px #eee;
}<div id="flag"></div><span>SOME TEXT HERE</span>
选项2 ：使用线性渐变
在该方法中，使用线性梯度作为伪元素的背景获得条纹，该伪元素旋转45度以实现斜条纹效果。即使由于使用线性渐变的百分比而未修复尺寸，也可以使用此选项。
div{
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}
div:before{
content: '';
position: absolute;
background: -webkit-linear-gradient(90deg, red 50%, #eee 50%);
background: -moz-linear-gradient(0deg, red 50%, #eee 50%);
background: linear-gradient(0deg, red 50%, #eee 50%);
background-size: 100% 20px;
top: 0px;
left: 0px;
height: 150%;
width: 150%;
-webkit-transform-origin: 15% 60%;
-moz-transform-origin: 15% 60%;
transform-origin: 15% 60%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div:after{
content: '';
position: absolute;
background: #eee;
top: -25%;
left: 25%;
height: 50%;
width: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}<div></div>
注意：在第二个示例中，我将顶部三角形定位为仅在示例中仍然在两侧留下一些空间。这个fiddle有一个顶部三角形，覆盖了旗帜的整个宽度。
答案 1 :(得分：1)
你可以使用css渐变，以及一个伪元素：
div{
position:relative;
height:300px;
width:300px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 15%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 20%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 40%, rgba(255,255,255,1) 41%, rgba(255,255,255,1) 55%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 80%, rgba(255,255,255,1) 81%, rgba(255,255,255,1) 95%, rgba(0,0,0,1) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(15%,rgba(0,0,0,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(35%,rgba(0,0,0,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,1)), color-stop(55%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(76%,rgba(0,0,0,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(255,255,255,1)), color-stop(95%,rgba(255,255,255,1)), color-stop(96%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* IE10+ */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div:before{
content:"";
position:absolute;
border-top:150px solid white;
border-left:150px solid transparent;
border-right:150px solid transparent;
top:0;<div></div>
创建上部的略微不同的方法也可以（我猜）：
div {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
background: rgb(255, 255, 255);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(0, 0, 0, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(0, 0, 0, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(76%, rgba(0, 0, 0, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(255, 255, 255, 1)), color-stop(95%, rgba(255, 255, 255, 1)), color-stop(96%, rgba(0, 0, 0, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* IE10+ */
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
div:before {
content: "";
position: absolute;
height: 70%;
width: 70%;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
background: white;
top: 0;<div></div>
有用的资源： Gradient editor
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？