我想找到一个用纯 CSS3 和 HTML 制作的丝带玫瑰花饰,或者获得有关如何制作的提示。我应该看起来像这样
Demo
这是我尝试过的...
<div class="star"></div>
<div class="circle">Ribbon Rosette</div>
.star {
left: 100px;
top: 100px;
height: 80px;
width: 80px;
background: silver;
position: absolute;
text-align:left;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:before {
height: 80px;
width: 80px;
background: silver;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:after {
padding-top: 10px;
text-align: center;
vertical-align: middle;
height: 70px;
width: 80px;
background: silver;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.circle {
font: 400 18px/1.1 "freight-sans-pro",sans-serif;
color: #000000;
left: 95px;
top: 95px;
position: absolute;
text-align:center;
padding-top: 25px;
width: 90px;
height: 65px;
background: silver;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
}
最佳答案
首先,你所做的一切都很棒,我在底部为你添加了丝带,在 span
下添加了 2 个 div
元素和 class
.circle
并虚拟添加了丝带三 Angular 形......
Demo
Demo 2(更长的三 Angular 形调整 border: 40px solid rgba(255,255,255,1);
)
.circle span:nth-of-type(1) {
width: 40px;
height: 120px;
background: #F6C431;
content: "";
display: block;
position: absolute;
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
z-index: -1;
left: 10px;
}
.circle span:nth-of-type(1):after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
bottom: -1px;
left: 0;
border: 20px solid rgba(255,255,255,1);
border-top: 20px solid rgba(255,255,255,0);
border-left: 20px solid rgba(255,255,255,0);
border-right: 20px solid rgba(255,255,255,0);
}
.circle span:nth-of-type(2) {
width: 40px;
height: 80px;
background: #F6C431;
content: "";
display: block;
position: absolute;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
z-index: -1;
left: 50px;
box-shadow: -10px -20px 10px 1px #D5A002;
}
.circle span:nth-of-type(2):after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
bottom: -1px;
left: 0;
border: 20px solid rgba(255,255,255,1);
border-top: 20px solid rgba(255,255,255,0);
border-left: 20px solid rgba(255,255,255,0);
border-right: 20px solid rgba(255,255,255,0);
}
关于html - 如何制作一个 CSS3 丝带玫瑰花结,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20970854/