css修改图片形状,css定位图形改(原创)

Html

Css

Js

技术可靠

jQuery是一个快速、简洁的JavaScript框架

是继Prototype之后又一个优秀的JavaScript代码库

精准匹配

jQuery的核心特性可以总结为

具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器

并且可对CSS选择器进行扩展

数据透明

jQuery选择符引擎执行速度的显著提升

从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平

服务贴心

它使用了全新的选择符引擎Sizzle

在各个浏览器下全面超越其他同类型JavaScript框架的查询速度

使用live()方法可以为当前及将来增加的元素绑定事件

* {

margin:0;

padding:0;

}

html {

height:100%;

}

.main {

width:50%;

margin:0 auto;

position:relative;

}

.box_lay {

position:absolute;

height:100%;

left:50%;

margin-left:-4.13rem;

}

.box_graph {

width:0;

height:0;

border:4rem solid transparent;

border-radius:50%;

cursor:pointer;

position:absolute;

}

.box_graph p {

color:#fff;

position:relative;

width:1.5rem;

word-break:break-all;

font-size:.6rem;

left:-2.5rem;

top:-.8rem;

}

.box_graph.st {

border-left-color:#8064A2;

transform:rotate(45deg);

}

.box_graph.st p {

transform:rotate(-45deg);

}

.box_graph.nd {

border-left-color:#5F5BAE;

transform:rotate(135deg);

left:.25rem;

}

.box_graph.nd p {

transform:rotate(-135deg);

}

.box_graph.rd {

border-left-color:#4BACC6;

transform:rotate(-45deg);

top:.25rem;

}

.box_graph.rd p {

transform:rotate(45deg);

}

.box_graph.fin {

border-left-color:#4691CC;

transform:rotate(-135deg);

left:.25rem;

top:.25rem;

}

.box_graph.fin p {

transform:rotate(135deg);

}

.box_desc {

position:absolute;

width:5rem;

border-radius:15px;

font-size:13px;

height:3.5rem;

padding:0;

z-index:-1;

overflow:hidden;

}

/* 左上、左下半圆详情 */

.box_dec.st .box_desc,.box_dec.rd .box_desc {

left:-5.5rem;

padding-right:2.5rem;

}

/* 左下、右下半圆详情 */

.box_dec.rd .box_desc,.box_dec.fin .box_desc {

top:5rem;

}

/* 右上、右下半圆详情 */

.box_dec.nd .box_desc,.box_dec.fin .box_desc {

left:5.5rem;

padding-left:2.5rem;

}

.box_dec.st .box_desc {

border:3px solid #8064A2;

}

.box_dec.rd .box_desc {

border:3px solid #4BACC6;

}

.box_dec.nd .box_desc {

border:3px solid #5F5BAE;

}

.box_dec.fin .box_desc {

border:3px solid #4691CC;

}

.box_desc .box_inner {

position:absolute;

left:0;

top:0;

right:-17px;

bottom:0;

overflow-x:hidden;

overflow-y:scroll;

padding:0 .15rem;

text-align:left;

}

.box_dec.fin p,.box_dec.nd p {

text-align:right;

}

.box_inner p {

padding:.15rem 2rem 0 0;

}

.half_t .box_child:last-child .box_inner p,.half_b .box_child:last-child .box_inner p {

padding:.15rem 0 0 2.5rem;

}

(function(doc, win) {

var docEl = win.document.documentElement;

var dpr = window.devicePixelRatio || 1;

var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

var refreshRem = function() {

var clientWidth = win.innerWidth ||

doc.documentElement.clientWidth ||

doc.body.clientWidth;

// console.log(clientWidth); 页面宽度

if (!clientWidth) return;

var fz;

var px;

px = 16;

fz = px * clientWidth / 375;

// console.log(fz);

docEl.style.fontSize = fz + 'px';

// console.log(docEl.style.fontSize);

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, refreshRem, false);

doc.addEventListener('DOMContentLoaded', refreshRem, false);

refreshRem();

})(document, window);