Comment créer une larme en HTML?
Comment créer une forme comme celle-ci à afficher sur une page Web?
Je ne veux pas utiliser images car elles deviendraient floues lors de la mise à l'échelle
J'ai essayé avec CSS:
.tear {
display: inline-block;
transform: rotate(-30deg);
border: 5px solid green;
width: 50px;
height: 100px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}<div class="tear">
</div>Cela s'est avéré vraiment foutu.
Et puis j'ai essayé avec SVG:
<svg viewBox="0 100 100">
<polygon points="50,0 100,70 50,100 0,70"/>
</svg>Cela a pris la forme, mais la partie inférieure n'était pas incurvée.
Y a-t-il un moyen de créer cette forme pour qu'elle puisse être utilisée dans une page HTML?
Approche SVG:
Vous pouvez facilement réaliser la double courbe avec un élément SVG intégré et l'élément <path/> à la place de l'élément <polygon/> qui ne le fait pas. permettre des formes courbes.
L'exemple suivant utilise l'élément <path/> avec:
- 2 commandes de la courbe de Bézier quadratique pour les 2 courbes du haut (lignes commençant par
Q) - 1 commande d'arc pour le grand en bas (ligne commençant par
A)
<svg width="30%" viewbox="0 0 30 42">
<path fill="transparent" stroke="#000" stroke-width="1.5"
d="M15 3
Q16.5 6.8 25 18
A12.8 12.8 0 1 1 5 18
Q13.5 6.8 15 3z" />
</svg>SVG est un excellent outil pour créer ce type de formes à double courbe. Vous pouvez vérifier ceci poste sur les doubles courbes avec une comparaison SVG/CSS. Certains des avantages de l'utilisation de SVG dans ce cas sont les suivants:
- Contrôle de la courbe
- Contrôle de remplissage (opacité, couleur)
- Contrôle du trait (largeur, opacité, couleur)
- Quantité de code
- Temps pour construire et maintenir la forme
- Évolutif
- Pas de requête HTTP (si utilisé en ligne comme dans l'exemple)
La prise en charge du navigateur pour les SVG en ligne retourne à Internet Explorer 9. Voir canIuse pour plus d'informations.
Rayon de base
Vous pouvez le faire relativement facilement dans CSS en utilisant border-radius et transformations. Votre CSS était juste un peu en retrait.
.tear {
width: 50px;
height: 50px;
border-radius: 0 50% 50% 50%;
border: 3px solid black;
transform: rotate(45deg);
margin-top: 20px;
}<div class="tear"></div>Rayon de bord avancé
Ce sera très similaire à ci-dessus, mais lui donne un peu plus de forme.
.tear {
width: 50px;
height: 50px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border: 3px solid black;
transform: rotate(-45deg);
margin-top: 20px;
}<div class="tear"></div>Votre problème principal avec votre code CSS était:
- Vous avez utilisé une hauteur différente de la largeur
- Vous n'avez pas pivoté la taille d'angle correcte
Ainsi, en "corrigeant" ces problèmes, vous générez:
.tear {
display: inline-block;
transform: rotate(-45deg);
border: 5px solid green;
width: 100px;
height: 100px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
/***for demo only***/
.tear {
margin: 50px;
}<div class="tear">
</div>Notez également que, pour économiser sur la longueur de CSS, vous pouvez réécrire vos propriétés border-radius en:
border-radius: 50% 0 50% 50%;
cela pourrait être amélioré avec des pseudo-éléments comme indiqué dans ce violon
Des alternatives
J'ai trouvé this par Vinay Challuru sur codepen.
Veuillez noter qu'avec la logique ici, j'ai pu créer le SVG pour presque toutes les formes de construction possibles/etc. Par exemple, une sortie rapide était:
<svg viewBox='0 0 400 400'>
<path fill="none" stroke="#333" stroke-width="5" d="M200,40 C200,115 280,180 280,240 A80,80,0 0,1,120,240 C120,180 200,115 200,40" stroke-linejoin='miter'></path>
</svg>Il utilise un SVG et vous permet de modifier la forme de plusieurs façons, en ayant la possibilité de modifier sa forme pour obtenir le résultat souhaité:
var SVG = function() {
this.element = document.getElementsByTagName("svg")[0];
this.namespace = "http://www.w3.org/2000/svg";
this.width = 400;
this.height = 400;
}
/****Let's initialise our SVG ready to draw our shape****/
var svg = new SVG();
/****This sets up the user interface - we've included the script for this as an external library for the codepen****/
var gui = new dat.GUI();
/****Here's where the code to create the shape begins!****/
var Teardrop = function() {
this.x = svg.width * 0.5;
this.y = svg.height * 0.1;
this.width = svg.width * 0.4;
this.triangleHeight = svg.height * 0.5;
this.yCP1 = svg.height * 0.2;
this.yCP2 = svg.height * 0.45;
this.element = null;
this.ctrlPoints = [];
this.anchors = [];
this.fill = "none";
this.stroke = "#333";
this.strokeWidth = 2;
this.showCtrlPoints = true;
this.init();
}
Teardrop.prototype.init = function() {
this.element = document.createElementNS(svg.namespace, "path");
svg.element.appendChild(this.element);
this.element.setAttribute("fill", this.fill);
this.element.setAttribute("stroke", this.stroke);
this.element.setAttribute("stroke-width", this.strokeWidth);
for (var i = 0; i < 3; i++) {
this.ctrlPoints.Push(document.createElementNS(svg.namespace, "circle"));
svg.element.appendChild(this.ctrlPoints[i]);
this.ctrlPoints[i].setAttribute("fill", this.fill);
this.ctrlPoints[i].setAttribute("stroke", 'red');
this.ctrlPoints[i].setAttribute("stroke-width", 1);
this.anchors.Push(document.createElementNS(svg.namespace, "line"));
svg.element.appendChild(this.anchors[i]);
this.anchors[i].setAttribute("stroke-width", 1);
this.anchors[i].setAttribute("stroke", this.stroke);
this.anchors[i].setAttribute("stroke-dasharray", "3,2");
}
this.draw();
}
Teardrop.prototype.draw = function() {
this.radius = this.width / 2;
path = [
"M", this.x, ",", this.y,
"C", this.x, ",", this.yCP1, " ", this.x + this.width / 2, ",", this.yCP2, " ", this.x + this.width / 2, ",", this.y + this.triangleHeight,
"A", this.radius, ",", this.radius, ",", "0 0,1,", this.x - this.width / 2, ",", this.y + this.triangleHeight,
"C", this.x - this.width / 2, ",", this.yCP2, " ", this.x, ",", this.yCP1, " ", this.x, ",", this.y
];
this.element.setAttribute("d", path.join(""));
cpCoords = [];
cpCoords[0] = [this.x, this.yCP1];
cpCoords[1] = [this.x - this.width / 2, this.yCP2];
cpCoords[2] = [this.x + this.width / 2, this.yCP2];
anchorCoords = [];
anchorCoords[0] = [this.x, this.y];
anchorCoords[1] = [this.x - this.width / 2, this.y + this.triangleHeight];
anchorCoords[2] = [this.x + this.width / 2, this.y + this.triangleHeight];
for (var i = 0; i < 3; i++) {
this.ctrlPoints[i].setAttribute("cx", cpCoords[i][0]);
this.ctrlPoints[i].setAttribute("cy", cpCoords[i][1]);
this.anchors[i].setAttribute("x1", cpCoords[i][0]);
this.anchors[i].setAttribute("x2", anchorCoords[i][0]);
this.anchors[i].setAttribute("y1", cpCoords[i][1]);
this.anchors[i].setAttribute("y2", anchorCoords[i][1]);
if (this.showCtrlPoints) {
this.ctrlPoints[i].setAttribute("r", 2);
this.anchors[i].setAttribute("stroke-width", 1);
} else {
this.ctrlPoints[i].setAttribute("r", 0);
this.anchors[i].setAttribute("stroke-width", 0);
}
}
}
var teardrop = new Teardrop();
gui.add(teardrop, 'triangleHeight', 0, svg.height * 0.75);
gui.add(teardrop, 'width', 0, 200);
gui.add(teardrop, 'yCP1', 0, svg.height);
gui.add(teardrop, 'yCP2', 0, svg.height);
gui.add(teardrop, 'showCtrlPoints', 0, svg.height);
for (var i in gui.__controllers) {
gui.__controllers[i].onChange(function() {
teardrop.draw();
});
}html,
body {
height: 100%;
}
svg {
display: block;
margin: 0 auto;
background: url('http://unitedshapes.com/images/graph-paper/graph-paper.png');
}<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<svg width='400px' height='400px'></svg>Clause de non-responsabilité Je n'ai pas écrit le stylo ci-dessus, je l'ai seulement recherché.
Version CSS
Bien que cela soit loin d’être achevé, vous pourrez peut-être aussi générer cette forme à l’aide de CSS.
.tear{
height:200px;
width:200px;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 29%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 100%);
border-radius:50%;
margin:120px;
position:relative;
}
.tear:before{
content:"";
position:absolute;
top:-70%;left:0%;
height:100%;width:50%;
background: radial-gradient(ellipse at -50% -50%, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 100%);
}
.tear:after{
content:"";
position:absolute;
top:-70%;left:50%;
height:100%;width:50%;
background: radial-gradient(ellipse at 150% -50%, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 100%);
}<div class="tear"></div>Version SVG
Je devrais savoir que SVG devrait être au sommet de cette réponse, cependant, j'aime les défis et voici donc une tentative avec SVG.
svg {
height: 300px;
}
svg path {
fill: tomato;
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">
<path d="M49.015,0.803
c-0.133-1.071-1.896-1.071-2.029,0
C42.57,36.344,20,43.666,20,68.367
C20,83.627,32.816,96,48,96
s28-12.373,28-27.633
C76,43.666,53.43,36.344,49.015,0.803z
M44.751,40.09
c-0.297,1.095-0.615,2.223-0.942,3.386
c-2.007,7.123-4.281,15.195-4.281,24.537
c0,5.055-2.988,6.854-5.784,6.854
c-3.189,0-5.782-2.616-5.782-5.831
c0-11.034,5.315-18.243,10.005-24.604
c1.469-1.991,2.855-3.873,3.983-5.749
c0.516-0.856,1.903-0.82,2.533,0.029
C44.781,39.116,44.879,39.619,44.751,40.09z"/>
</svg>En modifiant les valeurs path, vous pourrez modifier la forme de votre motif en forme de goutte.
OMI cette forme nécessite une courbe lisse à beziers pour assurer la continuité de la courbe.
La goutte en question:
Pour la goutte en question,
- les courbes lisses ne peuvent pas être utilisées, car les points de contrôle n'auront pas la même longueur. Mais nous devons encore faire en sorte que les points de contrôle se trouvent exactement à l'opposé (180 °) des points de contrôle précédents, afin d'assurer une continuité totale de la courbe . L'image ci-dessous illustre ce point:
Remarque : Les courbes rouge et bleue sont deux courbes quadratiques différentes.
stroke-linejoin="miter", pour la partie supérieure en pointe.Comme cette forme utilise uniquement des commandes successives
c, nous pouvons l’omettre.
Voici l'extrait final:
<svg height="300px" width="300px" viewBox="0 0 12 16">
<path fill="#FFF" stroke="black" stroke-width="0.5" stroke-linejoin="miter"
d="M 6 1 c -2 3 -5 5 -5 9
0 7 10 7 10 0
0 -4 -3 -6 -5 -9z" />
</svg>Bien que TBH , les courbes des réponses acceptées ne soient pas tout à fait continues.
Pour IE 5-8 (VML)
Ne fonctionne que dans IE 5-8. VML utilise des commandes différentes de SVG. Par exemple. il utilise v pour les beziers cubiques relatifs .
Remarque: Cet extrait ne s'exécutera pas non plus dans IE 5-8. Vous devez créer un fichier html et l'exécuter directement dans le navigateur.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-Microsoft-com:vml">
<head>
<style> v\:* { behavior: url(#default#VML); }
</style >
</head>
<body>
<div style="width:240; height:320;">
<v:shape coordorigin="0 0" coordsize="12 16" fillcolor="white" strokecolor="black" strokewidth="1"
strokeweight="5" style="width:240; height:320"
path="M 6 1 v -2 3 -5 5 -5 9
0 7 10 7 10 0
0 -4 -3 -6 -5 -9 x e">
</v:shape>
</div>
</body>
</html>
Ou si la police de votre lecteur le prend en charge, utilisez les caractères Unicode.
DROPLET: ???? (💧)
ou
DROPLET NOIRE: ???? (🌢)
Échelle en conséquence!
Personnellement, j'utiliserais un SVG pour cela. Vous pouvez créer des SVG dans la plupart des logiciels de graphiques vectoriels. Je recommanderais:
J'en ai créé un ci-dessous qui illustre votre forme dans Illustrator.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="223.14px" height="319.008px" viewBox="0 0 223.14 319.008" enable-background="new 0 0 223.14 319.008" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M111.57,13.291c0,0,57.179,86.984,72.719,108.819
c30.359,42.66,41.005,114.694,1.626,154.074c-20.464,20.463-47.533,30.293-74.344,29.488h-0.002
c-26.811,0.805-53.88-9.025-74.344-29.488C-2.154,236.804,8.492,164.77,38.851,122.11C54.391,100.275,111.57,13.291,111.57,13.291z" />
</svg>Toile HTML
Ceci est une option découverte dans ce fil jusqu'à présent. Les commandes utilisées pour les dessins sur toile sont très similaires à SVG (et web-tiki mérite les crédits pour l’idée de base utilisée dans cette réponse).
La forme en question peut être créée à l’aide des commandes de courbe propres à la toile (Quadratic ou Bezier) ou de l’API Path. La réponse contient des exemples pour les trois méthodes.
Le support du navigateur pour Canvas est plutôt bon .
Utilisation de courbes quadratiques
window.onload = function() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineJoin = 'miter';
ctx.moveTo(120, 20);
ctx.quadraticCurveTo(117.5, 30, 148, 68);
ctx.arc(120, 88, 34.5, 5.75, 3.66, false);
ctx.quadraticCurveTo(117.5, 35, 120, 20);
ctx.closePath();
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.fillStyle = '#77CCEE'
ctx.stroke();
ctx.fill();
}
}canvas {
margin: 50px;
height: 100px;
width: 200px;
transform: scale(1.5);
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}<canvas id='canvas'></canvas>Vous trouverez ci-dessous une version avancée avec un dégradé et des ombres. J'ai également inclus un effet hover sur la forme pour illustrer un inconvénient de Canvas par rapport à SVG. Le canevas est basé sur un raster (pixel) et donnerait donc un aspect flou/pixelisé lorsqu'il est redimensionné au-delà d'un certain point. La seule solution à cela serait de repeindre la forme à chaque redimensionnement du navigateur, ce qui est une surcharge.
window.onload = function() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var lineargradient = ctx.createRadialGradient(135, 95, 1, 135, 95, 10);
lineargradient.addColorStop(0, 'white');
lineargradient.addColorStop(1, '#77CCEE');
ctx.beginPath();
ctx.lineJoin = 'miter';
ctx.moveTo(120, 20);
ctx.quadraticCurveTo(117.5, 30, 148, 68);
ctx.arc(120, 88, 34.5, 5.75, 3.66, false);
ctx.quadraticCurveTo(117.5, 35, 120, 20);
ctx.closePath();
ctx.strokeStyle = '#333';
ctx.lineWidth = 3;
ctx.fillStyle = lineargradient;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(50, 50, 50, 0.5)";
ctx.stroke();
ctx.fill();
}
}canvas {
margin: 50px;
height: 100px;
width: 200px;
transform: scale(1.5);
}
/* Just for demo */
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
canvas{
transition: all 1s;
}
canvas:hover{
transform: scale(2);
}<canvas id='canvas'></canvas>Utiliser les courbes de Bézier
window.onload = function() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var lineargradient = ctx.createRadialGradient(135, 95, 1, 135, 95, 10);
lineargradient.addColorStop(0, 'white');
lineargradient.addColorStop(1, '#77CCEE');
ctx.beginPath();
ctx.lineJoin = 'miter';
ctx.arc(120, 88, 35, 5.74, 3.66, false);
ctx.bezierCurveTo(100, 55, 122, 27.5, 120, 20);
ctx.bezierCurveTo(122, 27.5, 121, 31.5, 150, 70);
ctx.closePath();
ctx.strokeStyle = 'rgba(109,195,250,0.2)';
ctx.lineWidth = 1;
ctx.fillStyle = lineargradient;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(50, 50, 50, 0.5)";
ctx.stroke();
ctx.fill();
}
}canvas {
margin: 75px;
height: 300px;
width: 300px;
transform: scale(1.5);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}<canvas id='canvas' height='300' width='300'></canvas>Utilisation de l'API Path
window.onload = function() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.lineJoin = 'miter';
var p = new Path2D("M120 20 Q117.5 30 146 68 A34 34 0 1 1 92 68 Q117.5 35 120 20z");
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.fillStyle = '#77CCEE'
ctx.stroke(p);
ctx.fill(p);
}
}canvas {
margin: 50px;
height: 100px;
width: 200px;
transform: scale(1.5);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}<canvas id='canvas'></canvas>Remarque: Comme mentionné dans ma réponse ici , l'API Path n'est pas encore prise en charge par IE et Safari.
Lectures supplémentaires:
J'ai aussi trouvé this sur Codepen créé par l'utilisateur Ana Tudor en utilisant CSS et le style box-shadow et les équations paramétriques. Très simple, très peu de code. Et de nombreux navigateurs supportent le style CSS3 Box-shadow:
body {
background-color: black;
}
.tear {
position: absolute;
top: 50%;
left: 50%;
margin: -0.125em;
width: 0.25em;
height: 0.25em;
border-radius: 50%;
box-shadow: 0em -5em red, 0.00118em -4.97592em #ff1800, 0.00937em -4.90393em #ff3000, 0.03125em -4.7847em #ff4800, 0.07283em -4.6194em #ff6000, 0.13915em -4.40961em #ff7800, 0.23408em -4.15735em #ff8f00, 0.36em -3.86505em #ffa700, 0.51777em -3.53553em #ffbf00, 0.70654em -3.17197em gold, 0.92382em -2.77785em #ffef00, 1.16547em -2.35698em #f7ff00, 1.42582em -1.91342em #dfff00, 1.69789em -1.45142em #c7ff00, 1.97361em -0.97545em #afff00, 2.2441em -0.49009em #97ff00, 2.5em 0.0em #80ff00, 2.73182em 0.49009em #68ff00, 2.93032em 0.97545em #50ff00, 3.08681em 1.45142em #38ff00, 3.19358em 1.91342em #20ff00, 3.24414em 2.35698em #08ff00, 3.23352em 2.77785em #00ff10, 3.15851em 3.17197em #00ff28, 3.01777em 3.53553em #00ff40, 2.81196em 3.86505em #00ff58, 2.54377em 4.15735em #00ff70, 2.21783em 4.40961em #00ff87, 1.84059em 4.6194em #00ff9f, 1.42017em 4.7847em #00ffb7, 0.96608em 4.90393em #00ffcf, 0.48891em 4.97592em #00ffe7, 0.0em 5em cyan, -0.48891em 4.97592em #00e7ff, -0.96608em 4.90393em #00cfff, -1.42017em 4.7847em #00b7ff, -1.84059em 4.6194em #009fff, -2.21783em 4.40961em #0087ff, -2.54377em 4.15735em #0070ff, -2.81196em 3.86505em #0058ff, -3.01777em 3.53553em #0040ff, -3.15851em 3.17197em #0028ff, -3.23352em 2.77785em #0010ff, -3.24414em 2.35698em #0800ff, -3.19358em 1.91342em #2000ff, -3.08681em 1.45142em #3800ff, -2.93032em 0.97545em #5000ff, -2.73182em 0.49009em #6800ff, -2.5em 0.0em #7f00ff, -2.2441em -0.49009em #9700ff, -1.97361em -0.97545em #af00ff, -1.69789em -1.45142em #c700ff, -1.42582em -1.91342em #df00ff, -1.16547em -2.35698em #f700ff, -0.92382em -2.77785em #ff00ef, -0.70654em -3.17197em #ff00d7, -0.51777em -3.53553em #ff00bf, -0.36em -3.86505em #ff00a7, -0.23408em -4.15735em #ff008f, -0.13915em -4.40961em #ff0078, -0.07283em -4.6194em #ff0060, -0.03125em -4.7847em #ff0048, -0.00937em -4.90393em #ff0030, -0.00118em -4.97592em #ff0018;
}<div class="tear"></div>Version CSS
Comme il n’ya que peu de réponses ici, je me suis demandé pourquoi ne pas y ajouter une autre méthode. Ceci utilise à la fois HTML et CSS pour créer le larme.
Cela vous permettra de changer la couleur de la bordure et de l'arrière-plan de la larme et de redimensionner la partie supérieure de celle-ci.
En utilisant un seul div, nous pouvons créer un cercle avec border et border-radius. Ensuite, en utilisant des pseudo-éléments (:before & :after), nous créons un triangle CSS plus ici, cela agira comme la pointe de la larme. En utilisant :before comme bordure, nous plaçons :after avec une taille plus petite et la couleur d'arrière-plan souhaitée.
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid;
margin: 80px auto;
position: relative;
}
div:before,
div:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
}
div:before {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 104px solid black;
top: -75px;
}
div:after {
border-left: 46px solid transparent;
border-right: 46px solid transparent;
border-bottom: 96px solid #fff;
top: -66px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}<div></div>Voici une démo de la larme avec une couleur de fond
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid;
background: red;
margin: 80px;
position: relative;
}
div:before,
div:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
}
div:before {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid black;
top: -70px;
}
div:after {
border-left: 46px solid transparent;
border-right: 46px solid transparent;
border-bottom: 96px solid red;
top: -66px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}<div></div>C'est aussi simple que de mettre une couleur de fond sur la div et de changer la couleur :afterbottom-border. Pour modifier la bordure, vous devez également modifier la couleur de la bordure div ainsi que la couleur d'arrière-plan :before.
Il est assez facile de faire cela avec SVG en utilisant simplement une ressource de conversion d'image telle que http://image.online-convert.com/convert-to-svg , qui a été utilisée pour créer les éléments suivants: :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="213.000000pt" height="300.000000pt" viewBox="0 0 213.000000 300.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.12, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1035 2944 c-143 -250 -231 -380 -508 -752 -347 -465 -432 -616 -493
-882 -91 -394 10 -753 285 -1013 508 -479 1334 -361 1677 240 126 221 165 494
105 726 -66 254 -178 452 -609 1076 -96 140 -226 335 -288 435 -155 249 -135
229 -169 170z m85 -212 c40 -69 192 -298 543 -818 268 -396 354 -593 364 -835
12 -281 -82 -509 -296 -714 -103 -99 -236 -173 -396 -221 -82 -25 -105 -27
-260 -28 -148 -1 -181 2 -255 22 -348 96 -611 357 -691 689 -41 167 -25 392
41 587 62 185 154 334 444 716 177 235 320 444 402 592 27 49 51 88 54 88 3 0
25 -35 50 -78z"/>
</g>
</svg>Si vous choisissez d'utiliser SVG, vous devriez lire les chemins. Je suggérerais également un éditeur SVG.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-0.05 0 1195.1 703" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" transform="">
<defs id="svgEditorDefs">
<line id="svgEditorLineDefs" stroke="black" style="fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px;"/>
</defs>
<rect id="svgEditorBackground" x="0" y="0" width="1195" height="703" style="fill: none; stroke: none;"/>
<path stroke="black" id="e1_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" d="M 198 207 a 117.969 117.969 0 1 0 213 8" transform=""/>
<path stroke="black" id="e4_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="" d="M 411.348 215.696 a 349.677 349.677 0 0 0 -110.37 -131.718"/>
<path stroke="black" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="matrix(-0.182706 -0.983168 0.983168 -0.182706 157.664 417.408)" id="e6_circleArc" d="M 301.799 202.299 a 329.763 329.763 0 0 0 -102.951 -124.781"/>
</svg>Voici quatre formes de larmes SVG de plus en plus simples:
<svg viewbox="-20 -20 180 180">
<g stroke="black" fill="none">
<path transform="translate(0)"
d="M 0 0
C 0 10 10 17 10 27
C 10 40 -10 40 -10 27
C -10 17 0 10 0 0
Z"/>
<path transform="translate(40)"
d="M 0 0
C 0 16 15 25 5 34
Q 0 38 -5 34
C -15 25 0 16 0 0
Z"/>
<path transform="translate(80)"
d="M 0 0
C 0 10 18 36 0 36
S 0 10 0 0
Z"/>
<path transform="translate(120)"
d="M 0 0
Q 18 36 0 36
T 0 0
Z"/>
<g stroke-width="0.25" stroke="red">
<g transform="translate(0)">
<ellipse rx="1" ry="1" cx="0" cy="0" />
<ellipse rx="1" ry="1" cx="0" cy="10"/>
<ellipse rx="1" ry="1" cx="10" cy="17"/>
<ellipse rx="1" ry="1" cx="10" cy="27"/>
<ellipse rx="1" ry="1" cx="10" cy="40"/>
<ellipse rx="1" ry="1" cx="-10" cy="40"/>
<ellipse rx="1" ry="1" cx="-10" cy="27"/>
<ellipse rx="1" ry="1" cx="-10" cy="17"/>
<line x1="0" y1="0" x2="0" y2="10"/>
<line x1="10" y1="17" x2="10" y2="40"/>
<line x1="-10" y1="40" x2="-10" y2="17"/>
</g>
<g transform="translate(40)">
<ellipse rx="1" ry="1" cx="0" cy="0" />
<ellipse rx="1" ry="1" cx="0" cy="16"/>
<ellipse rx="1" ry="1" cx="15" cy="25"/>
<ellipse rx="1" ry="1" cx="5" cy="34"/>
<ellipse rx="1" ry="1" cx="0" cy="38"/>
<ellipse rx="1" ry="1" cx="-5" cy="34"/>
<ellipse rx="1" ry="1" cx="-15" cy="25"/>
<line x1="0" y1="0" x2="0" y2="16"/>
<line x1="15" y1="25" x2="0" y2="38"/>
<line x1="0" y1="38" x2="-15" y2="25"/>
</g>
<g transform="translate(80)">
<ellipse rx="1" ry="1" cx="0" cy="0" />
<ellipse rx="1" ry="1" cx="0" cy="10"/>
<ellipse rx="1" ry="1" cx="18" cy="36"/>
<ellipse rx="1" ry="1" cx="0" cy="36"/>
<ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
<line x1="0" y1="0" x2="0" y2="10"/>
<line x1="18" y1="36" x2="0" y2="36"/>
<line x1="0" y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
</g>
<g transform="translate(120)">
<ellipse rx="1" ry="1" cx="0" cy="0" />
<ellipse rx="1" ry="1" cx="18" cy="36"/>
<ellipse rx="1" ry="1" cx="0" cy="36"/>
<ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
<line x1="18" y1="36" x2="0" y2="36"/>
<line x1="0" y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
</g>
</g>
</g>
<g font-size="6" transform="translate(-1.5,-4)">
<text x="-10" y="-8"># of unique points:</text>
<text transform="translate( 0)">8</text>
<text transform="translate( 40)">7</text>
<text transform="translate( 80)">4</text>
<text transform="translate(120)">3</text>
</g>
</svg>