svg+css实现立体三角锥形背景效果代码-html代码-BFW代码库

svg+css实现立体三角锥形背景效果代码

代码语言：html

所属分类：背景

代码描述：svg+css实现立体三角锥形背景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
body {
	margin: 0 auto;
}
svg{
	position:absolute;
	height: 100%;
	width: 100%;
}
/* Use below .mechMe class on an element to give it this pattern */
.mechMe {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CradialGradient id='grad'%3E%3Cstop offset='0%25' stop-color='%23000' /%3E%3Cstop offset='100%25' stop-color='%23ff8c00' /%3E%3C/radialGradient%3E%3Cpattern id='rubber' width='310' height='180' patternUnits='userSpaceOnUse' patternTransform='scale(1 1) skewY(10) skewX(-10)'%3E%3Crect height='180' width='310' opacity='1' fill='url(%23grad)' /%3E%3Cg id='t'%3E%3Cg id='tl'%3E%3Cpath class='r' fill='rgb(40,40,40)' d='M 155 90 L 105 0 L 155 -90' /%3E%3Cpath fill='rgb(30,30,30)' d='M 155 90 L 205 0 L 155 -90' /%3E%3Cpath stroke='rgb(20,20,20)' d='M 155 180 V -90' /%3E%3C/g%3E%3Cuse href='%23tl' transform='translate(0 180)' /%3E%3C/g%3E%3Cuse href='%23tl' transform='translate(155 90)' /%3E%3Cuse href='%23tl' transform='translate(-155 90)' /%3E%3Cuse href='%23t' transform='rotate(-60 155 90)' filter='brightness(90%25)' /%3E%3Cuse href='%23t' transform='rotate(-120 155 90)' filter='brightness(90%25)' /%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='%23222' opacity='0.2' /%3E%3Crect width='100%25' heigh.........完整代码请登录后点击上方下载按钮下载查看