Brauchen nur Rand für Pfeil nicht Farbe

Ich versuche Pfeil wie folgt zu implementieren.Brauchen nur Rand für Pfeil nicht Farbe

Dafür brauche ich nur Grenze nicht

Farbe Bitte überprüfen Sie diesen Link here

.pointer { 
 
    width: 200px; 
 
    height: 40px; 
 
    position: relative; 
 
    background: red; 
 
    } 
 
    .pointer:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid white; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    } 
 
    .pointer:before { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -20px; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid red; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    }

<div class="pointer"> 
 
    
 
</div>

I wie unten Bild sein erwarte

Quelle

2017-12-20 Kartheek s

Der Hintergrund ist transparent sein muss oder kann weiß sein? (Nicht, dass ich die Antwort habe, sondern einfach zu versuchen). –

Ich aktualisierte die Frage @ azeós –

ich vor geändert verwenden würde, nach und Skew verwandeln. Bietet Ihnen mehr Flexibilität.

.arrow{ 
 
position:relative; 
 
display:inline-block; 
 
min-width:100px; 
 
padding-left:1rem;padding-right:1rem; 
 
text-align:center; 
 
line-height:2; 
 
min-height:2rem; 
 
} 
 
.arrow:before,.arrow:after{ 
 
    content:" "; 
 
    z-index:-1; 
 
    display:block; 
 
    position:absolute; 
 
    left:0; 
 
    top:-1px; 
 
    border:2px solid red; 
 
    height:50%; 
 
    width:100%; 
 
} 
 
.arrow:before{ 
 
border-bottom:0; 
 
transform:skewX(45deg); 
 
} 
 
.arrow:after{ 
 
border-top:0; 
 
top:50%; 
 
transform:skewX(-45deg); 
 
} 
 

 
.left:before{ transform:skewX(-45deg);} 
 
.left:after{transform:skewX(45deg);} 
 

 
.blue:before,.blue:after{border-color:blue;} 
 

 
.bgpink:before,.bgpink:after{background-color: pink}

<div class="arrow"></div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="arrow left"> to the left </div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="arrow left blue"> and change border color </div> 
 

 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="arrow left blue bgpink"> and change bg color too </div>

Quelle

2017-12-20 08:08:21

.pointer { 
 
    width: 200px; 
 
    height: 40px; 
 
    position: relative; 
 
    background: red; 
 
    } 
 
    .pointer:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid white; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    } 
 
    .pointer:before { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -20px; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid red; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    } 
 
    .pointer2 { 
 
    width: 194px; 
 
    height: 36px; 
 
    position: absolute; 
 
    background:white; 
 
    top:2px; 
 
    left:4px 
 
    } 
 
    .pointer2:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 18px solid red; 
 
    border-top: 18px solid transparent; 
 
    border-bottom: 18px solid transparent; 
 
    } 
 
    .pointer2:before { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -18px; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 18px solid white; 
 
    border-top: 18px solid transparent; 
 
    border-bottom: 18px solid transparent; 
 
    }

<div class="pointer"> 
 
<div class="pointer2"> 
 
</div> 
 
    
 
</div>

Versuchen Sie es mit zwei Zeigern. Ich denke, dass dies die einzige Lösung mit CSS ist

Quelle

2017-12-20 06:25:16

Ich aktualisierte die Frage. Ich benötige keinen blauen Hintergrund. Bitte überprüfen Sie das Bild beigefügt –

@Kartheeks aktualisiert meine Antwort –

Ja, es ist das gleiche. Kannst du es mit nur einem div probieren? Weil diese divs dynamisch generiert werden, d. H. Sie werden gezogen und fallen gelassen, so dass ich den vollständigen Code ändern muss –

Option 1: Verwendung svg stattdessen arbeiten nur in moden broswers

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 
 
    <path d="M0 0 L100 0 L110 10 L100 20 L0 20 L10 10 Z" fill="transparent" stroke="red"/> 
 
</svg>

Option 2: Verwenden Sie Grenze, können Sie Wert ändern machen es glatt

.arrow { 
 
    width: 200px; 
 
    height: 80px; 
 
    position: relative; 
 
    border-top: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
.arrow:before, 
 
.arrow:after { 
 
    content: ""; 
 
    box-sizing: content-box; 
 
    border: 1px solid transparent; 
 
    width: 80px; 
 
    height: 80px; 
 
    display: block; 
 
    transform: translate(-43px) rotate(45deg) scale(0.708); 
 
    border-top: 1px solid #000; 
 
    border-right: 1px solid #000; 
 
} 
 

 
.arrow:before {} 
 

 
.arrow:after { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    transform: translate(42px) rotate(45deg) scale(0.708); 
 
}

<div class="arrow"></div>

Option 3:

.arrow { 
 
    background: url('data:image/svg+xml;utf8,<svg width="200" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L100 0 L110 10 L100 20 L0 20 L10 10 Z" fill="transparent" stroke="red"/></svg>'); 
 
    width: 200px; 
 
    height: 20px; 
 
}

<div class="arrow"></div>

Quelle

2017-12-20 06:31:20

Entschuldigung, ich brauche nur grundlegende HTML-Attribute, d. H. Div/p/... Unsere App ist wie wenn wir auf squre klicken, wird div quadratisch. Ähnlich, wenn wir auf das Rechteck klicken, wird es zu einem Rechteck ... –

svg als Hintergrund verwenden Nachdem einige Kommentare hier lesen, ist eine andere Lösung Skew Transformation und auf schweben sie verwandelte sich in einen Rechteck verwenden.

UPDATE

Ich habe eine andere Form, die an einen cirlce

body { 
 
background:#f2f2f5; 
 
} 
 

 
.pointer { 
 
    width: 200px; 
 
    height: 40px; 
 
    position: relative; 
 
    margin: 20px; 
 
    transition: 0.5s; 
 
} 
 

 
.pointer:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 50%; 
 
    border: 1px solid red; 
 
    border-bottom: 0; 
 
    transform: skew(35deg); 
 
    transition: 0.5s; 
 
} 
 

 
.pointer:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    border: 1px solid red; 
 
    border-top: 0; 
 
    transform: skew(-35deg); 
 
    transition: 0.5s; 
 
} 
 

 
.pointer:hover::after, 
 
.pointer:hover::before { 
 
    transform: skew(0deg); 
 
} 
 

 
.to-cirlce { 
 
    border: 1px solid transparent; 
 
} 
 

 
.to-cirlce:hover { 
 
    width: 80px; 
 
    height: 80px; 
 
    border: 1px solid red; 
 
    border-radius: 50%; 
 
} 
 

 
.to-cirlce:hover::after, 
 
.to-cirlce:hover::before { 
 
    border: none 
 
}

<div class="pointer"> 
 

 
</div> 
 

 
<div class="pointer to-cirlce"> 
 

 
</div>

Quelle

2017-12-20 07:57:47

können Sie Data URIs versuchen, eine Inline-svg Hintergrund mit CSS wie unten zu geben.Keine Notwendigkeit zu ändern, in HTML

.pointer { 
 
    width: 200px; 
 
    height: 40px; 
 
    position: relative; 
 
    border: 1px solid red; 
 
    border-right: 0; 
 
    border-left: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.pointer:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -1px; 
 
    left: -1px; 
 
    width: 21px; 
 
    height: 40px; 
 
    background-image: url("data:image/svg+xml;utf8,<svg width='21' height='41' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L20 20 L0 40' fill='transparent' stroke='red'/></svg>"); 
 
} 
 

 
.pointer:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -1px; 
 
    right: -21px; 
 
    width: 21px; 
 
    height: 40px; 
 
    background-image: url("data:image/svg+xml;utf8,<svg width='21' height='41' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L20 20 L0 40' fill='transparent' stroke='red'/></svg>"); 
 
}

<div class="pointer"></div>

Quelle

2017-12-20 11:29:44 Bhuwan

Brauchen nur Rand für Pfeil nicht Farbe

Antwort

Verwandte Themen