Form die Ecken des div

Ich möchte die Ecken des Div wie eine Form des Bogens gebogen!Form die Ecken des div

Ich habe versucht Rand-Radius, aber es formt die Ecken zu viel. Gibt es eine beliebige CSS3-Eigenschaft, um das Ergebnis zu erzielen?

Das ist, was ich jetzt

dies habe, was ich es wie ..

html aussehen wollen:

<body> 
    <div class="who_we_are_bg"> 
    <div class="container"> 
    <div class="content"> 

<div class="who_we_are_content"> 
<img src="images/who-we-are.jpg" alt="LCK chemicals"/> 
<div class="corner1"></div> 
<div class="corner2"></div> 
<div class="corner3"></div> 
<div class="corner4"></div> 
<h2>WHO WE WRE</h2> 
<p>SRI LCK Chemical founded in 2010 has exceptional sourcing ability for chemicals used in Industrial and House keep segments. We strive to develop quality products and outstanding customer service.</p> 
<p>SRI LCK Chemical founded in 2010 has exceptional sourcing ability for chemicals used in Industrial and House keep segments. We strive to develop quality products and outstanding customer service.</p> 
<a href="#">more info</a> 

    </div> 
</div> 
    </div> 
</div> 

</body>

css:

.container{max-width:1170px;margin:0 auto;border:1px solid red;} 
    .who_we_are_bg{width:100%;float:left;background:url("images/texture2.jpg")repeat 0 0;} 
.who_we_are_content {float: none;margin: 0 auto;width: 90%;padding:50px 0 80px;overflow:hidden;} 
.who_we_are_content img{margin:8px 40px 20px 0;padding:10px;background:#fff;position:relative;} 
.corner1{position:absolute;width:50px;height:10px; box-shadow: 0px 0px 10px black;z-index:-1;} 
.who_we_are_content h2{font-family: 'OpenSans-Bold';font-size:30px;margin:10px 0 10px;} 
.who_we_are_content p{padding-bottom:10px;font-family: 'OpenSansSemibold';} 
.who_we_are_content a{font-family: 'OpenSansSemibold';text-decoration:none;float:left;padding:10px;background:#98b769;color:#fff;}

Quelle

2016-04-21 Nag

http://stackoverflow.com/questions/16388078/is-a-concave-border-radius-possible – Pogrindis

Sie eine halbe Grenze oder was brauchen? –

ja dude..wie in der abbildung dargestellt – Nag

Sie können den Eindruck einer konkaven Umrandung mit radialen Farbverläufen im Hintergrund erzeugen. Zum Beispiel so etwas wie diese:

#test { 
    width: 200px; 
    height: 200px; 
    background: #888888; 
    background: 
     radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px), 
     radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px); 
    background-size:100px 200px, 100px 200px; 
    background-position:0 0,100% 0; 
    background-repeat:no-repeat; 
}

Beachten Sie, dass die meisten Webkit-Browser noch Präfixe für Radial-Gradienten erfordern, und wenn Sie in vollem Umfang unterstützen älteren Browser mögen Sie die ältere gradient Syntax müssen möglicherweise implementieren.

von hier Geworben: https://stackoverflow.com/a/16388187/4119808

Quelle

2016-04-21 11:37:44

es gibt abgerundete kanten! aber ich will Kanten gerade und wenig hervorstehen in der Mitte, wie das Bild gezeigt – Nag

Form die Ecken des div

Antwort

Verwandte Themen