Question

您如何实现3个元素的角度布局？你会使用哪种技术？帆布？转变？扭曲？仅JS或CSS？它必须以某种方式响应：）

我尝试了不同的方法，但我不确定。这是一个：

＆＃13;

/* ======================================================== */
/*	'resize window' event handler
/* ======================================================== */

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent('on' + type, callback);
    } else {
        object['on' + type] = callback;
    }
};

addEvent(window, 'resize', function(event) {
    setSliceSize();
    consoleLog();
});

/* ======================================================== */
/*	get window width
/* ======================================================== */

function getWidth() {
    if (self.innerWidth) {
        return self.innerWidth;
    }

    if (document.documentElement && document.documentElement.clientWidth) {
        return document.documentElement.clientWidth;
    }

    if (document.body) {
        return document.body.clientWidth;
    }
}

/* ======================================================== */
/*	get window height
/* ======================================================== */

function getHeight() {
    if (self.innerHeight) {
        return self.innerHeight;
    }

    if (document.documentElement && document.documentElement.clientHeight) {
        return document.documentElement.clientHeight;
    }

    if (document.body) {
        return document.body.clientHeight;
    }
}

/* ======================================================== */
/*	get window square root 
/* ======================================================== */

function getSquareRoot() {
	return Math.sqrt((Math.pow(getWidth(), 2)) + (Math.pow(getHeight(), 2)) );
}

/* ======================================================== */
/*	set dimensions of squares
/* ======================================================== */

function setSliceSize() {
	var slices = document.getElementsByClassName('slice');
	for (var i = 0; i < slices.length; i++) {
		slices[i].style.width = getSquareRoot() + 'px';
		slices[i].style.height = getSquareRoot() + 'px';
	}

	var rotator = document.getElementById('rotator');
	rotator.style.width = getSquareRoot() * 2 + 'px';
	rotator.style.height = getSquareRoot() * 2 + 'px';
	rotator.style.marginLeft = - getSquareRoot() + 'px';
	rotator.style.marginTop = - getSquareRoot() + 'px';
}

function deg45() {

}

function consoleLog() {
	console.log(getWidth()); console.log(getHeight());
	console.log(getSquareRoot());
}

window.onload = function(){
	setSliceSize();
	consoleLog();
}

＆＃13;

* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* ======================================================== */
/*  rotator & slices
/* ======================================================== */

#rotator {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: rotate(45deg);
}

.slice {
    position: relative;
}

#first-third {
    background: red;
    margin-top: 30%;
    float: left;
}

#second-third {
    background: green;
    float: right;
}

#third-third {
    background: blue;
    float: right;
}

/* ======================================================== */
/*  ...
/* ======================================================== */

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>x</title>
    <link rel=stylesheet href="styles.css">
    <script src="main.js"></script>
</head>

<body>
	<div class="wrap">
		<div id="rotator">
		    <div id="first-third" class="slice"></div>
			<div id="second-third" class="slice"></div>
			<div id="third-third" class="slice"></div>
			<div class="clearfix"></div>
		</div>
	</div>
</body>

</html>

＆＃13;

这是一个很好的解决方案吗？

谢谢;）

整个视口上的角度元素

0 个答案: