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%3Cu.........完整代码请登录后点击上方下载按钮下载查看