Ik heb een div voor een voorbeeldvenster:
HTML:
<div class="preview-content">PREVIEW</div>
CSS:
.preview-content {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
width: 100%;
min-height: 300px;
max-height: 300px;
line-height: 300px;
text-align: center;
vertical-align: middle;
font-size: 2em;
}
Vraag: hoe diagonale lijnen toe te voegen aan div achtergrond als in het beeld
Let op: met CSS alleen indien mogelijk
Bij voorbaat dank.
Antwoord 1, Autoriteit 100%
U kunt het iets als dit:
<style>
.background {
background-color: #BCBCBC;
width: 100px;
height: 50px;
padding: 0;
margin: 0
}
.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform:
translateY(-20px)
translateX(5px)
rotate(27deg);
position: absolute;
/* top: -20px; */
}
.line2 {
width: 112px;
height: 47px;
border-bottom: 1px solid green;
-webkit-transform:
translateY(20px)
translateX(5px)
rotate(-26deg);
position: absolute;
top: -33px;
left: -13px;
}
</style>
<div class="background">
<div class="line1"></div>
<div class="line2"></div>
</div>
Hier is een JSFiddle .
Verbeterde versie van antwoord voor uw doel.
Antwoord 2, Autoriteit 397%
Bijna perfecte oplossing, die automatisch schalen naar dimensies van een element zou worden gebruikt voor CSS3-lineaire verloop verbonden met CALC () zoals hieronder wordt weergegeven. Het belangrijkste nadeel is natuurlijk compatibiliteit. Code hieronder werkt in Firefox 25 en Explorer 10 en 11, maar in Chrome (ik heb V30 en V32 Dev) getest) Er zijn wat subtiele problemen met lijnen verdwijnen als ze te smal zijn. Bovendien is verdwenen afhankelijk van de afmetingen van de doos – Stijl hieronder werkt voor div { width: 100px; height: 100px}, maar mislukt voor div { width: 200px; height: 200px}waarvoor in mijn tests 0.8pxin berekeningen moeten worden vervangen door ten minste 1.1048507095pxvoor diagonalen die moeten worden getoond en zelfs vervolgens de lijnweergave kwaliteit is vrij slecht. Laten we hopen dat deze Chrome-bug snel zal worden opgelost.
.crossed {
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}<textarea class="crossed"></textarea>Antwoord 3, autoriteit 81%
Je kunt SVG gebruiken om de lijnen te tekenen.
.diag {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}<div class="diag" style="width: 300px; height: 100px;"></div>Antwoord 4, autoriteit 44%
Voor alle andere antwoorden op deze drie jaar oude vraag is CSS3 (of SVG) vereist. Het kan echter ook worden gedaan met niets anders dan kreupele oude CSS2:
.crossed {
position: relative;
width: 300px;
height: 300px;
}
.crossed:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 1px;
bottom: 1px;
border-width: 149px;
border-style: solid;
border-color: black white;
}
.crossed:after {
content: '';
position: absolute;
left: 1px;
right: 1px;
top: 0;
bottom: 0;
border-width: 149px;
border-style: solid;
border-color: white transparent;
}<div class='crossed'></div>Antwoord 5, autoriteit 14%
Controleer het volgende.
<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="mydiv"></div>
JS:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
CSS:
html, body {
margin: 0;
padding: 0;
}
#myCanvas {
padding: 0;
margin: 0;
width: 200px;
height: 100px;
}
#mydiv {
position: absolute;
left: 0px;
right: 0;
height: 102px;
width: 202px;
background: rgba(255,255,255,0);
padding: 0;
margin: 0;
}
Antwoord 6, autoriteit 14%
antwoord van intrepidisop deze pagina met behulp van een achtergrond-SVG in CSS heeft het voordeel dat het mooi kan worden geschaald naar elk formaat of aspect verhouding, hoewel de SVG <path>en gebruikt met een vulling die niet zo goed schaalt.
Ik heb zojuist de SVG-code geüpdatet om <line>te gebruiken in plaats van <path>en heb non-scaling-strokevector-effectom te voorkomen dat de lijnen schalen met de container:
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'>
<line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/>
<line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/>
</svg>
Dit is wat in de CSS van het oorspronkelijke antwoord (met HTML aanpasbaar gemaakt) in de CSS terechtgekomen:
.diag {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%, auto;
}<div class="diag" style="width: 200px; height: 150px; border: 1px solid; resize: both; overflow: auto"></div>Antwoord 7, autoriteit 8%
u kunt een CSS3-transformatie-eigenschap gebruiken:
div
{
transform:rotate(Xdeg);
-ms-transform:rotate(Xdeg); /* IE 9 */
-webkit-transform:rotate(Xdeg); /* Safari and Chrome */
}
Xdeg = uw waarde
Bijvoorbeeld…
Je kunt meer div maken en een z-index eigenschap gebruiken.
Maak dus een div met lijn en roteer deze.
Antwoord 8, autoriteit 6%
Als je wilt dat het kruis gedeeltelijk transparant is, zou de naïeve benadering zijn om linear-gradientkleuren semi-transparant te maken. Maar dat werkt niet goed vanwege de alfa-vermenging op de kruising, waardoor een verschillend gekleurde diamant ontstaat. De oplossing hiervoor is om de kleuren effen te laten, maar in plaats daarvan transparantie toe te voegen aan de verloopcontainer:
.cross {
position: relative;
}
.cross::after {
pointer-events: none;
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.cross1::after {
background:
linear-gradient(to top left, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%),
linear-gradient(to top right, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%);
}
.cross2::after {
background:
linear-gradient(to top left, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%),
linear-gradient(to top right, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%);
opacity: 0.35;
}
div { width: 180px; text-align: justify; display: inline-block; margin: 20px; }<div class="cross cross1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>
<div class="cross cross2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>Antwoord 9, autoriteit 6%
Hier is hoe ik dit deed met behulp van de css clip-patheigenschap naast relatieveen absolutepositionering om een mooiere kruising te creëren.
.cross {
width:150px;
height: 150px;
border: 2px solid #555;
border-radius: 5px;
position: relative;
background: #efefef;
}
.cross .diag1{
position: absolute;
width:100%; height:100%;
clip-path: polygon(90% 0, 100% 0%, 10% 100%, 0% 100%);
background: #311B92;
}
.cross .diag2{
position: absolute;
width:100%; height:100%;
clip-path: polygon(0 0, 10% 0, 100% 100%, 90% 100%);
background: #1B5E20;
}<div class="cross">
<div class="diag1"></div>
<div class="diag2"></div>
</div>Antwoord 10, autoriteit 6%
Een dynamische svg-oplossing voor elk scherm is de volgende:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" stroke-width="1" stroke="#000">
<line x1="0" y1="0" x2="100%" y2="100%"/>
<line x1="100%" y1="0" x2="0" y2="100%"/>
</svg>
En als u het op de achtergrond wilt houden, gebruik dan de position: absolutemet bovenaan en links 0.
Antwoord 11, Autoriteit 6%
.crossed {
width: 200px;
height: 200px;
border:solid 1px;
background-color: rgb(210, 137, 226);
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 15px,
#ccc 10px,
#ccc 20px
),
repeating-linear-gradient(
135deg,
transparent,
transparent 15px,
#ccc 10px,
#ccc 20px
);
}<div class='crossed'>Hello world</div>Antwoord 12
Ik moest willekeurige diagonale lijnen in elk div. Mijn probleem met de gepubliceerde antwoorden is dat geen van hen een willekeurige lijn van punt A naar punt B toestaat, zonder de trigonometrie zelf voor de hoeken te doen. Met JavaScript & AMP; CSS kunt u dit doen. Ik hoop dat het nuttig is, geef gewoon een paar punten op en je bent gouden.
const objToStyleString = (obj) => {
const reducer = (acc, curr) => acc += curr + ": " + obj[curr] + ";";
return Object.keys(obj).reduce(reducer, "")
};
const lineStyle = (xy1, xy2, borderStyle) => {
const p1 = {x: xy1[0], y: xy1[1]};
const p2 = {x: xy2[0], y: xy2[1]};
const a = p2.x - p1.x;
const xOffset = p1.x;
const b = p2.y - p1.y;
const yOffset = p1.y;
const c = Math.sqrt(a*a + b*b);
const ang = Math.acos(a/c);
const tX1 = `translateX(${ -c/2 + xOffset}px) `;
const tY1 = `translateY(${yOffset}px) `;
const rot = `rotate(${ang}rad) `;
const tX2 = `translateX(${c/2}px) `;
const tY2 = `translateY(${0}px) `;
return {
"width": Math.floor(c) + "px",
"height": "0px",
"border-top": borderStyle,
"-webkit-transform": tX1+tY1+rot+tX2+tY2,
"position": "relative",
"top": "0px",
"left": "0px",
"box-sizing": "border-box",
};
};
function drawLine(parent, p1, p2, borderStyle) {
const style = lineStyle(p1, p2, borderStyle);
const line = document.createElement("div");
line.style = objToStyleString(style);
parent.appendChild(line);
}
drawLine(container, [100,5], [25,195], "1px dashed purple");
drawLine(container, [100,100], [190,190], "1px solid blue");
drawLine(container, [25,150], [175,150], "2px solid red");
drawLine(container, [25,10], [175,20], "5px dotted green");#container {
background-color: #BCBCBC;
width: 200px;
height: 200px;
padding: 0;
margin: 0;
}<div id="container">
</div>Antwoord 13
.borders {
width: 200px;
height: 100px;
background-color: black;
border-width: 40px;
border-style: solid;
border-color: red blue green yellow;
}<div class='borders'></div>