Ich muss dieses weiße Ding über grauen Streifen machen. Ich war verwirrt, da ich so etwas noch nicht gemacht habe. Welchen Ansatz würden Sie für die Erstellung solcher Dinge anwenden?Wie mache ich eine Kreissache in CSS?
<div class="stripe"></div>
.stripe {
background-color: #B7B7B7;
height: 13vh;
}
Vielen Dank im Voraus!
Ich hoffe, dass Sie diese Antwort finden sowohl einfache als auch pixelgenau sein.
.stripe {
background-color: #B7B7B7;
height: 13vh;
}
.whiteThing {
background-color: white;
height: 13vh;
width: 13vh;
border-radius:0 50% 50% 0;
}<div class="stripe">
<div class="whiteThing"></div>
</div>Möglicherweise möchten Sie die Eigenschaft border-radius verwenden.
HTML:
<div class="stripe">
<div class="circle">
</div>
</div>
CSS:
.stripe {
background-color: #B7B7B7;
height: 13vh;
}
.circle{
background:white;
width:10%;
height:100%;
border-radius:00px 50px 50px 0px;
}
W3Schools on border-radius property
.stripe {
background-color: #B7B7B7;
height: 13vh;
}
.thatwhitethingovergreystripe {
background-color: white;
height: 13vh; /* or 100% */
width: 80px; /* or 6.5vh for semicircle or 13vh for rectangle with r width and semicircle */
border-top-right-radius: 6.5vh; /* this does the trick; make it any number you like or just make it full height of your div */
border-bottom-right-radius: 6.5vh; /* and this */
}<div class="stripe">
<div class="thatwhitethingovergreystripe"></div>
</div>Zwar ist dies eine gute Lösung ist, sind die Höhe und Breite unterschiedliche Werttypen , so wird das Seitenverhältnis bei unterschiedlichen Ansichtsfensterhöhen nicht beibehalten. Behandeln Sie den Grenzradius nicht mit nur einer einzigen Linie. Rand-Radius: 0 50% 50% 0; Siehe meine Antwort unten. – ericgilchrist
<div class="stripe"><span class="circle"></span></div>
.circle {
border-radius:50%; //makes the square into circle regardless of size
background: white;
height:13vh;
width:13vh;
display:block;
overflow:hidden;
}
Sie es so tun können, finden Sie Geige: https://jsfiddle.net/5wwg1q5j/3/
html
<div class="stripe">
<div class="rec">
</div>
<div class="circle">
</div>
</div>
css
body{margin: 0;}
.stripe {
background-color: #B7B7B7;
height: 100px;
}
.rec{
width: 100px;
height: 100px;
background-color: white;
}
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
left: 50px;
top: 0;
/* width and height can be anything, as long as they're equal */
}
ich auf diese Weise tat
.s2{
background-color:white;
float:left;
width: 70px;
height: 13vh;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.stripe {
background-color: #B7B7B7;
height: 13vh;
}<div class="s2"></div><div class="stripe"></div>Oh! ...Sie haben bereits geantwortet :( –
Nicht frustriert werden. Ich schätze Ihre Antwort –
Danke, ich weiß es zu schätzen, dass Sie meine Antwort auch bemerkt haben. :) –
ein einzelner Tag + Pseudo tut das auch:
h1 {
overflow:hidden;/* to hold shadow of pseudo */
padding-left:1.5em; /* leave room for the shape */
line-height:2em;
}
h1:before { /* the shape */
content:'';
float:left;/* or inline-block or absolute position, works too in flex context*/
height:2em;/* here height of tag if one line */
width:2em;/* from a square you can draw a circle */
margin-left:-2.5em;/* hide half of it or any amount */
border-radius:50%;/* draw that circle */
box-shadow:0 0 500px 500px gray, 0 0 1000px 1000px yellow;;/* paint a hudge shadow to use as background for parent tag */
}
/* add borders ? */
h1 + h1 {
border:solid;
border-left:none;
border-radius: 0 1em 1em 0;
}
h1 + h1:before {
box-shadow:0 0 0 3px,0 0 500px 500px gray, 0 0 1000px 1000px yellow;;/* paint a hudge shadow to use as background for parent tag */
}
body {
background:url(http://lorempixel.com/600/400/nature/2);
}<h1> reverse rounded </h1>
<h1> reverse rounded borders </h1>einig weiteren Beispiele und verschiedene Formen oder Verwendung - http://codepen.io/gcyrillus/pen/yJfjl - http://codepen.io/gcyrillus/pen/Kpvuf - http://codepen.io/gcyrillus/pen/HEFtk-http://dabblet.com/gist/5690173 - http://dabblet.com/gist/5309926
möglicherweise mit (oder einem Duplikat) http://stackoverflow.com/q/8503636/2606013 – Harry