Es gibt viele Möglichkeiten, die Form mit einer schrägen Kante nur auf einer Seite zu erstellen.
Die folgenden Methoden können keine dynamischen Größen unterstützen, wie bereits in der Frage erwähnt:
- Randdreieckmethode mit Pixelwerten für
border-width.
- Lineare Verläufe mit der Winkelsyntax (wie 45 Grad, 30 Grad usw.).
Die Methoden, die dynamische Größen unterstützen können, werden unten beschrieben.
Methode 1 - SVG
( Browserkompatibilität )
SVG kann verwendet werden, um die Form entweder mit polygons oder paths zu erzeugen . Das folgende Snippet verwendet polygon. Jeder erforderliche Textinhalt kann über der Form positioniert werden.
$(document).ready(function() {
$('#increasew-vector').on('click', function() {
$('.vector').css({
'width': '150px',
'height': '100px'
});
});
$('#increaseh-vector').on('click', function() {
$('.vector').css({
'width': '100px',
'height': '150px'
});
});
$('#increaseb-vector').on('click', function() {
$('.vector').css({
'width': '150px',
'height': '150px'
});
});
})
div {
float: left;
height: 100px;
width: 100px;
margin: 20px;
color: beige;
transition: all 1s;
}
.vector {
position: relative;
}
svg {
position: absolute;
margin: 10px;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 0;
}
polygon {
fill: tomato;
}
.vector > span {
position: absolute;
display: block;
padding: 10px;
z-index: 1;
}
.vector.top > span{
height: 50%;
width: 100%;
top: calc(40% + 5px); /* size of the angled area + buffer */
left: 5px;
}
.vector.bottom > span{
height: 50%;
width: 100%;
top: 5px;
left: 5px;
}
.vector.left > span{
width: 50%;
height: 100%;
left: 50%; /* size of the angled area */
top: 5px;
}
.vector.right > span{
width: 50%;
height: 100%;
left: 5px;
top: 5px;
}
/* Just for demo */
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
polygon:hover, span:hover + svg > polygon{
fill: steelblue;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
.vector.left{
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vector bottom">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 40,0 40,100 0,60" />
</svg>
</div>
<div class="vector top">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,40 40,0 40,100 0,100" />
</svg>
</div>
<div class="vector left">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 40,0 40,100 20,100" />
</svg>
</div>
<div class="vector right">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 20,0 40,100 0,100" />
</svg>
</div>
<div class='btn-container'>
<button id="increasew-vector">Increase Width</button>
<button id="increaseh-vector">Increase Height</button>
<button id="increaseb-vector">Increase Both</button>
</div>
Vorteile
- SVG wurde entwickelt, um skalierbare Grafiken zu erstellen und kann mit allen Dimensionsänderungen gut funktionieren.
- Rahmen und Schwebeeffekt können mit minimalem Codierungsaufwand erzielt werden.
- Der Form kann auch ein Bild- oder Verlaufshintergrund bereitgestellt werden.
Nachteile
- Die Browserunterstützung ist wahrscheinlich der einzige Nachteil, da IE8 SVG nicht unterstützt. Dies kann jedoch durch die Verwendung von Bibliotheken wie Raphael und auch VML verringert werden. Darüber hinaus ist die Browserunterstützung keineswegs schlechter als die anderen Optionen.
Methode 2 - Gradientenhintergrund
( Browserkompatibilität )
Lineare Farbverläufe können weiterhin verwendet werden, um die Form zu erzeugen, jedoch nicht mit Winkeln, wie in der Frage erwähnt. Wir müssen die to [side] [side]Syntax (dank vals ) verwenden, anstatt Winkel anzugeben. Wenn Seiten angegeben werden, werden die Verlaufswinkel automatisch basierend auf den Abmessungen des Containers angepasst.
$(document).ready(function() {
$('#increasew-gradient').on('click', function() {
$('.gradient').css({
'height': '100px',
'width': '150px'
});
});
$('#increaseh-gradient').on('click', function() {
$('.gradient').css({
'height': '150px',
'width': '100px'
});
});
$('#increaseb-gradient').on('click', function() {
$('.gradient').css({
'height': '150px',
'width': '150px'
});
});
})
div {
float: left;
height: 100px;
width: 100px;
margin: 10px 20px;
color: beige;
transition: all 1s;
}
.gradient{
position: relative;
}
.gradient.bottom {
background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 100% 40%, 100% 60%;
background-position: 0% 100%, 0% 0%;
}
.gradient.top {
background: linear-gradient(to bottom right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to bottom right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 100% 40%, 100% 60%;
background-position: 0% 0%, 0% 100%;
}
.gradient.left {
background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 40% 100%, 60% 100%;
background-position: 0% 0%, 100% 0%;
}
.gradient.right {
background: linear-gradient(to top left, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top left, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 40% 100%, 60% 100%;
background-position: 100% 0%, 0% 0%;
}
.gradient span{
position: absolute;
}
.gradient.top span{
top: calc(40% + 5px); /* background size + buffer */
left: 5px;
height: 50%;
}
.gradient.bottom span{
top: 5px;
left: 5px;
height: 50%;
}
.gradient.left span{
left: 40%; /* background size */
top: 5px;
width: 50%;
}
.gradient.right span{
left: 5px;
top: 5px;
width: 50%;
}
/* Just for demo */
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
.gradient.left{
clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient bottom"><span>Some content</span>
</div>
<div class="gradient top"><span>Some content</span>
</div>
<div class="gradient left"><span>Some content</span>
</div>
<div class="gradient right"><span>Some content</span>
</div>
<div class='btn-container'>
<button id="increasew-gradient">Increase Width</button>
<button id="increaseh-gradient">Increase Height</button>
<button id="increaseb-gradient">Increase Both</button>
</div>
Vorteile
- Die Form kann auch dann erreicht und beibehalten werden, wenn die Abmessungen des Behälters dynamisch sind.
- Der Hover-Effekt kann durch Ändern der Verlaufsfarbe hinzugefügt werden.
Nachteile
- Der Hover-Effekt wird auch dann ausgelöst, wenn sich der Cursor außerhalb der Form, aber innerhalb des Containers befindet.
- Das Hinzufügen von Rahmen würde schwierige Manipulationen des Verlaufs erfordern.
- Farbverläufe sind dafür bekannt, gezackte Ecken zu erzeugen, wenn die Breite (oder Höhe) sehr groß ist.
- Bildhintergründe können nicht für die Form verwendet werden.
Methode 3 - Skew-Transformationen
( Browserkompatibilität )
Bei dieser Methode wird ein Pseudoelement hinzugefügt, verzerrt und so positioniert, dass es so aussieht, als ob eine der Kanten geneigt / abgewinkelt ist. Wenn die obere oder untere Kante geneigt ist, sollte der Versatz entlang der Y-Achse liegen, andernfalls der Die Drehung sollte entlang der X-Achse erfolgen. Die Seite transform-originsollte der schrägen Seite gegenüberliegen.
$(document).ready(function() {
$('#increasew-skew').on('click', function() {
$('.skew').css({
'height': '100px',
'width': '150px'
});
});
$('#increaseh-skew').on('click', function() {
$('.skew').css({
'height': '150px',
'width': '100px'
});
});
$('#increaseb-skew').on('click', function() {
$('.skew').css({
'height': '150px',
'width': '150px'
});
});
})
div {
float: left;
height: 100px;
width: 100px;
margin: 50px;
color: beige;
transition: all 1s;
}
.skew {
padding: 10px;
position: relative;
background: tomato;
}
.skew:after {
position: absolute;
content: '';
background: inherit;
z-index: -1;
}
.skew.bottom:after,
.skew.top:after {
width: 100%;
height: 60%;
}
.skew.left:after,
.skew.right:after {
height: 100%;
width: 60%;
}
.skew.bottom:after {
bottom: 0px;
left: 0px;
transform-origin: top left;
transform: skewY(22deg);
}
.skew.top:after {
top: 0px;
left: 0px;
transform-origin: top left;
transform: skewY(-22deg);
}
.skew.left:after {
top: 0px;
left: 0px;
transform-origin: bottom left;
transform: skewX(22deg);
}
.skew.right:after {
top: 0px;
right: 0px;
transform-origin: bottom right;
transform: skewX(-22deg);
}
.skew:hover {
background: steelblue;
}
/* Just for demo */
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.skew.bottom {
margin-top: 10px;
}
.skew.left {
clear: both;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skew bottom">Some content</div>
<div class="skew top">Some content</div>
<div class="skew left">Some content</div>
<div class="skew right">Some content</div>
<div class='btn-container'>
<button id="increasew-skew">Increase Width</button>
<button id="increaseh-skew">Increase Height</button>
<button id="increaseb-skew">Increase Both</button>
</div>
Vorteile
- Form kann auch mit Rändern erreicht werden.
- Der Hover-Effekt wird auf die Form beschränkt.
Nachteile
- Die Abmessungen müssen proportional erhöht werden, damit die Form beibehalten wird. Wenn ein Element schief ist, nimmt sein Versatz in der Y-Achse mit zunehmender
widthGröße zu und umgekehrt (versuchen Sie width, 200pxdas To im Snippet zu erhöhen ). Weitere Informationen hierzu finden Sie hier .
Methode 4 - Perspektiventransformationen
( Browserkompatibilität )
Bei dieser Methode wird der Hauptcontainer mit etwas Perspektive entlang der X- oder Y-Achse gedreht. Wenn Sie den entsprechenden Wert auf transform-origineinstellen, wird nur auf einer Seite eine schräge Kante erzeugt.
Wenn die Ober- oder Unterseite geneigt ist, sollte die Drehung entlang der Y-Achse erfolgen, andernfalls sollte die Drehung entlang der X-Achse erfolgen. Die Seite transform-originsollte der schrägen Seite gegenüberliegen.
$(document).ready(function() {
$('#increasew-rotate').on('click', function() {
$('.rotate').css({
'height': '100px',
'width': '150px'
});
});
$('#increaseh-rotate').on('click', function() {
$('.rotate').css({
'height': '150px',
'width': '100px'
});
});
$('#increaseb-rotate').on('click', function() {
$('.rotate').css({
'height': '150px',
'width': '150px'
});
});
})
div {
float: left;
height: 100px;
width: 100px;
margin: 50px;
color: beige;
transition: all 1s;
}
.rotate {
position: relative;
width: 100px;
background: tomato;
}
.rotate.bottom {
transform-origin: top;
transform: perspective(10px) rotateY(-2deg);
}
.rotate.top {
transform-origin: bottom;
transform: perspective(10px) rotateY(-2deg);
}
.rotate.left {
transform-origin: right;
transform: perspective(10px) rotateX(-2deg);
}
.rotate.right {
transform-origin: left;
transform: perspective(10px) rotateX(-2deg);
}
.rotate span {
position: absolute;
display: block;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
}
.rotate.bottom span {
padding: 10px;
transform-origin: top;
transform: perspective(10px) rotateY(2deg);
}
.rotate.top span {
padding: 20px;
transform-origin: bottom;
transform: perspective(20px) rotateY(2deg);
}
.rotate.left span {
padding: 10px;
transform-origin: right;
transform: perspective(10px) rotateX(2deg);
}
.rotate.right span {
padding: 0px 30px;
transform-origin: left;
transform: perspective(10px) rotateX(2deg);
}
.rotate:hover {
background: steelblue;
}
/* Just for demo */
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.rotate.left{
clear:both;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate bottom"><span>Some content</span>
</div>
<div class="rotate top"><span>Some content</span>
</div>
<div class="rotate left"><span>Some content</span>
</div>
<div class="rotate right"><span>Some content</span>
</div>
<div class='btn-container'>
<button id="increasew-rotate">Increase Width</button>
<button id="increaseh-rotate">Increase Height</button>
<button id="increaseb-rotate">Increase Both</button>
</div>
Vorteile
- Form kann mit Rändern erreicht werden.
- Die Abmessungen müssen nicht proportional erhöht werden, damit die Form erhalten bleibt.
Nachteile
- Der Inhalt wird ebenfalls gedreht, und daher müssen sie gegengedreht werden, um normal auszusehen.
- Das Positionieren von Text ist mühsam, wenn die Abmessungen nicht statisch sind.
Methode 5 - CSS-Clip-Pfad
( Browserkompatibilität )
Bei dieser Methode wird der Hauptcontainer mithilfe eines Polygons in die gewünschte Form geschnitten. Die Punkte des Polygons sollten abhängig von der Seite geändert werden, auf der die schräge Kante benötigt wird.
$(document).ready(function() {
$('#increasew-clip').on('click', function() {
$('.clip-path').css({
'height': '100px',
'width': '150px'
});
});
$('#increaseh-clip').on('click', function() {
$('.clip-path').css({
'height': '150px',
'width': '100px'
});
});
$('#increaseb-clip').on('click', function() {
$('.clip-path').css({
'height': '150px',
'width': '150px'
});
});
})
.clip-path {
position: relative;
float: left;
margin: 20px;
height: 100px;
width: 100px;
background: tomato;
padding: 4px;
transition: all 1s;
}
.clip-path.bottom {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top {
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path.left {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40% 100%);
}
.clip-path.right {
-webkit-clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%);
}
.clip-path .content {
position: absolute;
content: '';
height: calc(100% - 10px);
width: calc(100% - 8px);
background: bisque;
}
.clip-path.bottom .content {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top .content {
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path .content.img {
top: 6px;
background: url(http://lorempixel.com/250/250);
background-size: 100% 100%;
}
/* Just for demo */
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.clip-path.left {
clear: both;
}
.clip-path:hover {
background: gold;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
margin: 20px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clip-path bottom">
<div class="content">abcd</div>
</div>
<div class="clip-path top">
<div class="content img"></div>
</div>
<div class="clip-path left"></div>
<div class="clip-path right"></div>
<div class='btn-container'>
<button id="increasew-clip">Increase Width</button>
<button id="increaseh-clip">Increase Height</button>
<button id="increaseb-clip">Increase Both</button>
</div>
Vorteile
- Die Form kann auch dann beibehalten werden, wenn die Größe des Containers dynamisch geändert wird.
- Der Hover-Effekt wird innerhalb der Grenzen der Form perfekt eingeschränkt.
- Das Bild kann auch als Hintergrund für die Form verwendet werden.
Nachteile
- Die Browserunterstützung ist derzeit sehr schlecht.
- Rahmen können hinzugefügt werden, indem ein absolut positioniertes Element über der Form platziert und ihr der erforderliche Clip zugewiesen wird. Über einen Punkt hinaus passt es jedoch nicht gut, wenn die Größe dynamisch geändert wird.
Methode 6 - Leinwand
( Browserkompatibilität )
Leinwand kann auch verwendet werden, um die Form durch Zeichnen von Pfaden zu erzeugen. Das folgende Snippet enthält eine Demo. Jeder erforderliche Textinhalt kann über der Form positioniert werden.
window.onload = function() {
var canvasEls = document.getElementsByTagName('canvas');
for (var i = 0; i < canvasEls.length; i++) {
paint(canvasEls[i]);
}
function paint(canvas) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
if (canvas.className == 'bottom') {
ctx.moveTo(0, 0);
ctx.lineTo(250, 0);
ctx.lineTo(250, 100);
ctx.lineTo(0, 60);
} else if (canvas.className == 'top') {
ctx.moveTo(0, 40);
ctx.lineTo(250, 0);
ctx.lineTo(250, 100);
ctx.lineTo(0, 100);
} else if (canvas.className == 'left') {
ctx.moveTo(0, 0);
ctx.lineTo(250, 0);
ctx.lineTo(250, 100);
ctx.lineTo(60, 100);
} else if (canvas.className == 'right') {
ctx.moveTo(0, 0);
ctx.lineTo(190, 0);
ctx.lineTo(250, 100);
ctx.lineTo(0, 100);
}
ctx.closePath();
ctx.lineCap = 'round';
ctx.fillStyle = 'tomato';
ctx.fill();
}
$('#increasew-canvas').on('click', function() {
$('.container').css({
'width': '150px',
'height': '100px'
});
});
$('#increaseh-canvas').on('click', function() {
$('.container').css({
'width': '100px',
'height': '150px'
});
});
$('#increaseb-canvas').on('click', function() {
$('.container').css({
'width': '150px',
'height': '150px'
});
});
};
.container {
float: left;
position: relative;
height: 100px;
width: 100px;
margin: 20px;
color: beige;
transition: all 1s;
}
canvas {
height: 100%;
width: 100%;
}
.container > span {
position: absolute;
top: 5px;
left: 5px;
padding: 5px;
}
.top + span {
top: 40%; /* size of the angled area */
}
.left + span {
left: 40%; /* size of the angled area */
}
/* Just for demo */
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
div:nth-of-type(3) {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
<canvas height="100px" width="250px" class="bottom"></canvas> <span>Some content</span>
</div>
<div class="container">
<canvas height="100px" width="250px" class="top"></canvas> <span>Some content</span>
</div>
<div class="container">
<canvas height="100px" width="250px" class="left"></canvas> <span>Some content</span>
</div>
<div class="container">
<canvas height="100px" width="250px" class="right"></canvas> <span>Some content</span>
</div>
<div class='btn-container'>
<button id="increasew-canvas">Increase Width</button>
<button id="increaseh-canvas">Increase Height</button>
<button id="increaseb-canvas">Increase Both</button>
</div>
Vorteile
- Die Form kann auch dann erreicht und beibehalten werden, wenn die Abmessungen des Behälters dynamisch sind. Rahmen können ebenfalls hinzugefügt werden.
- Der Hover-Effekt kann mithilfe der
pointInpathMethode auf die Grenzen der Form beschränkt werden.
- Der Form kann auch ein Bild- oder Verlaufshintergrund bereitgestellt werden.
- Bessere Wahl, wenn Echtzeit-Animationseffekte benötigt werden, da keine DOM-Manipulation erforderlich ist.
Nachteile
- Canvas basiert auf Raster und daher werden die abgewinkelten Kanten pixelig oder unscharf, wenn sie über einen Punkt * hinaus skaliert werden .
* - Um eine Pixelierung zu vermeiden, müssen Sie die Form bei jeder Größenänderung des Ansichtsfensters neu streichen. Hier gibt es ein Beispiel dafür , aber das ist ein Overhead.
Meine Lösung ist inspiriert von der Methode 7 - Ansichtsfenster-Einheiten von Andrea Ligios oben auf dieser Seite.
Ich habe die "horizontale" Einheit auch für die Höhe verwendet (
height:10vw), um die angegebenen Proportionen im Trapez beizubehalten, wenn die Breite des Navigationsfensters geändert wird. Wir könnten diese Methode 7b - Ansichtsfensterbreite nennen .Darüber hinaus ermöglicht die Verwendung von zwei verschachtelten
divs anstelle von einem und dem:afterSelektor meiner Meinung nach eine bessere Abstimmung der Textinhaltsstile (ztext-align. B. usw.).quelle