CSS Trapezoid Knopf mit festen Border
Ist es möglich, über eine Trapez Taste wie im Bild zu schaffen? Ich suchte im Internet, konnte jedoch keine Lösung finden, die die Grenze anzeigt.
Edit: Scheint meine Frage war nicht klar oder wurde einfach nicht genug verstanden. Wie auch immer, die anderen Threads zeigen nur, wie man ein Trapez erzeugt, indem man zwei Elemente verbindet, aber wie fügt man einen Rahmen hinzu?
Versuchen Sie, den folgenden Code:
OPTION 1: PURE CSS
Die Logik dieses Ansatzes besteht darin, einen dicken Rand-Boden und einen dicken transparenten Rand hinzuzufügen, um einen Tab-Effekt zu erzielen.
.tabs {
display: flex;
flex-direction: row;
}
.tab {
height: 0;
width: 120px;
border-bottom: 50px solid #CCCCCC;
border-right: 20px solid transparent;
border-top-left-radius: 5px;
box-sizing: border-box;
display: block;
}
.tab:not(:first-child) {
margin-left: -10px;
z-index: 0;
}
.tab .label{
padding: 15px;
text-align: center;
color: #444444;
}
.active {
border-bottom: 50px solid #444444;
z-index: 10;
}
.active .label{
color: #ffffff;
}<div class="tabs">
<div class="tab active"><div class="label">TAB 1</div></div>
<div class="tab"><div class="label">TAB 2</div></div>
<div class="tab"><div class="label">TAB 3</div></div>
</div>OPTION 2 (dh nicht Grenze zur Registerkarte hinzufügen): USE SVG AS TAB HINTERGRUND
Die Logik dieses Ansatzes besteht darin, zwei separate Vektorbilder (svg) als Inline-Hintergrundbild zu verwenden:
.tabs {
display: flex;
flex-direction: row;
overflow: visible;
padding-left: 15px;
}
.tab {
height: 0;
width: 130px;
height: 38px;
margin-left: -15px;
z-index: -1;
cursor: pointer;
background-size: contain;
background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width=\"121px\" height=\"38px\" viewBox=\"0 0 121 38\"><path d=\"M0.786477689,37.3880765 L0.786477689,5 L0.786477689,5 C0.786477689,2.790861 2.57733869,1 4.78647769,1 L102.838012,1 L102.838012,1 C104.471746,1 105.941285,1.99354246 106.549997,3.50964209 L120.152151,37.3880765 L0.786477689,37.3880765 Z\" stroke=\"#979797\" fill=\"#F0F0F0\"></path></svg>") no-repeat;
}
.tab .label{
box-sizing: border-box;
padding: 12px;
text-align: center;
color: #444444;
font: 13px arial, sans-serif;
width: 90%;
}
.active {
background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width=\"121px\" height=\"38px\" viewBox=\"0 0 121 38\"><path d=\"M0.786477689,37.3880765 L0.786477689,5 L0.786477689,5 C0.786477689,2.790861 2.57733869,1 4.78647769,1 L102.838012,1 L102.838012,1 C104.471746,1 105.941285,1.99354246 106.549997,3.50964209 L120.152151,37.3880765 L0.786477689,37.3880765 Z\" stroke=\"#2D94B5\" fill=\"#2D94B5\"></path></svg>") no-repeat;
z-index: 10;
}
.active .label{
color: #ffffff;
}<div class="tabs">
<div class="tab"><div class="label">TAB 1</div></div>
<div class="tab"><div class="label">TAB 2</div></div>
<div class="tab active"><div class="label">TAB 3</div></div>
<div class="tab"><div class="label">TAB 4</div></div>
</div>Wenn Sie die Farben von Hintergrund (füllen) und Rand (Hub) zu ändern, analysieren gerade die .tab und .active Klasse, suchen Sie nach background Eigenschaft und suchen/bearbeiten die folgendes auf dem Inline-svg:
stroke=\"#979797\" fill=\"#F0F0F0\"stroke=\"#2D94B5\" fill=\"#2D94B5\"Hoffe, dass es Sie
Können Sie einen Rahmen pro Schaltfläche hinzufügen? – Cons7an7ine
@ Cons7an7ine Leider können Sie nicht Grenze auf meine erste Antwort hinzufügen (das ist jetzt OPTION 1 nach der Bearbeitung), weil die tatsächliche Registerkarte ist bereits der Rahmen selbst. Es gibt jedoch einen anderen Ansatz, ein SVG-Bild als Inline-Hintergrund der Registerkarte zu verwenden. Siehe OPTION 2 zu meiner Antwort oben. – makoi07
könnten Sie eine weitere Option hinzufügen, indem Sie transform: skewX()? Überprüfen Sie dies http://jsfiddle.net/bdhtn7kr/6/ – Cons7an7ine
.trapezoid {
width: 230px;
text-align: center;
height: 0;
position: relative;
border-right: 50px solid transparent;
border-top: 40px solid #2963BD;
border-left: 50px solid transparent;
box-sizing: content-box;
}
.trapezoid span {
position: absolute;
top: -30px;
left: 25%;
color: #fff;
}<div class="trapezoid"><span>Trapezoid Button</span></div>.tabButton{
background: #ff0000;
width: 100px;
padding: 5px;
position: relative;
}
.tabButton:before{
content: ' ';
position: absolute;
top: 8px;
right: -20px;
border: 20px solid transparent;
border-top-color: #ff0000;
transform: rotate(45deg)
}<div class="tabButton">
Navigator
</div>
Doppelte hilft: https://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3 (Ich habe falsch gewählt, kann die Abstimmung jetzt nicht ändern. Aber das sollte noch geschlossen werden.) –
Mögliches Duplikat von [Wie zeichne ein Trapez/Trapez mit CSS3?] (Https://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with -css3) – agrm
Danke für alle Antworten, aber wie Sie auf dem Bild sehen können, haben die trapezförmigen Tasten eine graue Grenze und das ist, was ich erreichen möchte. Die anderen Threads zeigen nur, wie man ein Trapez durch Verbinden von 2 Elementen erzeugt, aber wie füge ich einen Rahmen hinzu? – Cons7an7ine