太棒了!border 打造钻石王老五,发家致富值得学习!

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

钻石一枚

今天给大家带来钻石图形demo,主要使用了 border 。请用 Chrome 浏览器浏览,祝大家每年争取一个非洲之星(钻石名)。

demo

HTML CODE

<div class="base">
    <div class="angle"></div><!-- end angle -->
</div><!-- end base -->

CSS CODE

.base{
	border:64px solid;
	border-color:#67B2E4 transparent rgba(105,185,238,.50) transparent;
	height:0;
	margin:20% auto;
	position:relative;
	width:0;
}

.base:after,
.base:before,
.angle,
.angle:after,
.angle:before,
.shade{
	height:0;
	position:absolute;
	width:0;
}
.base:after,
.base:before,
.angle:after,
.angle:before{
	content:"";
	z-index:-1;
}

.base:after{
	border-bottom:64px solid #3498DB;
	border-left:64px solid transparent;
	border-right:64px solid transparent;
	left:-128px;
	bottom:0;
	width:128px;
}

.base:before{
	border:128px solid;
	border-color:#A3D1EF transparent transparent;
	left:-128px;
}

.angle{
	border:64px solid;
	border-color:transparent transparent rgba(255,255,255,.40);
	left:-64px;
	top:-128px;
	z-index:0;
}
.angle:after{
	border:128px solid;
	border-color:rgba(54,156,224,.50) transparent transparent;
	left:-128px;
	top:64px;
	-webkit-transform:scaleX(.5);
}
.angle:before{
	background-color:#000;
	border-radius:50%;
	-webkit-filter:blur(12px);
	height:12px;
	left:-32px;
	top:192px;
	-webkit-transform:scaleY(.5);
	width:64px;
	z-index:-1;
}
nike air max 90 hyperfuse

如需转载,烦请注明出处:https://www.w3cplus.com/demo/689.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部