Rahmenradius in Prozent

-2

In CSS ist es erlaubt so etwas zu schreiben.Rahmenradius in Prozent

#div-with-border { 
    width: 100%; // scales with parent wrapper 
    height: 30%; // scales with parent wrapper 

    border: 1px solid black; 
    border-radius: 10%; 
}

Wenn #div-width-border ist kein perfektes Quadrat der Grenze wird kein Kreis sein, da dies bedeutet, dass 10% der Breite und 10% der Höhe des Grenzradius verwendet werden (die abweichen). Ich möchte perfekte Kreise bekommen ... Ich kann px nicht verwenden, da der Rand-Radius von der Höhe/Breite abhängt.

Ich bin sicher, dass die Breite von #div-width-border immer größer ist als die Höhe des Elements. Ich würde einen Rand Radius der Größe 100% of element height benötigen, um einen perfekten Kreis zu erhalten, aber nur 100% wird es nicht tun, da es die Elementbreite für einen Teil der Radiusberechnung verwenden wird.

Quelle

2016-06-05 LastSecondsToLive

Haben Sie versucht, '50%'? – jonrsharpe

@jonrsharpe Ich bin hier in einer anderen Situation, da das div kein perfektes Quadrat ist und ich Prozentsätze benötige, um die Grenze unabhängig von der divs Breite/Höhe einkreisen zu lassen. – LastSecondsToLive

Das ist nicht die Frage, die Sie geschrieben haben; bitte [bearbeiten]. – jonrsharpe

Haben Sie versucht border-radius: 50%;? Da Sie sagen, dass das div ein perfektes Quadrat ist, sollte die Einstellung des Randradius auf 50% funktionieren.

Quelle

2016-06-05 12:53:47 hulkinBrain

Sorry, natürlich meinte ich, wenn das div * nicht * ein perfektes Quadrat ist. Edit .. – LastSecondsToLive

Die Info innerhalb der Div wird abgeschnitten, da Sie möchten, dass es kreisförmig ist. Das Div sollte quadratisch sein, um es in einen perfekten Kreis zu verwandeln. Sie sollten Padding hinzufügen, um das Zuschneiden oder Überlaufen des Inhalts des div zu vermeiden. Ist es in Ordnung, wenn Ihr div eine Überlaufeigenschaft hat? Andernfalls wird das div in der Form oval sein, da die Breite größer als die Höhe ist. – hulkinBrain

@hulking Ich meine, dass die Grenze einen perfekten Kreis bildet. Wie [this] (https://jsfiddle.net/pzxb170m/1/): Natürlich ist das div nicht. – LastSecondsToLive

Wenn Sie das Verhältnis zwischen der Breite und der Höhe kennen, können Sie die Slash-Annotation verwenden, um andere% -Werte anzugeben für horizontalen und vertikalen Rand-Radius. Ein Beispiel ist unten:

.wrapper { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
} 
 
.div-with-border { 
 
    width: 100%; 
 
    height: 25%; 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    border-radius: 10%/40%; 
 
}

<div class="wrapper"> 
 
    <div class="div-with-border"></div> 
 
</div>

Quelle

2016-06-05 13:27:32 MattDiMu

Antwort

Verwandte Themen