28172 sujets

CSS et mise en forme, CSS3

[Résolu] Probleme bordure sous div transparante

Bonjour à tous,

je commence un nouveau projet et je bute sur un probleme.

je créer une banniere en css avec un arrondi au milieu le tous avec une opacité de 0.8

je voudrais ajouter une border-bottom sous la forme et la on voit la bordure qui coupe le demi-cercle

je vous met le code html :

<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link rel="shortcut icon" type="image/ico" href="img/favicon.gif" />
   <link rel="stylesheet" type="text/css" href="style3.css" />
   <title> titre </title>
 </head>
 <body>
	 <div id="container">

			 <div id="box">

					<div id="moncercle"></div>
			 
			</div>
			
	 </div>
 </body>
</html>


et le css :

@-webkit-keyframes test {
  0%   { top:-200px; }
  100% { top:0px;  }
}
@-moz-keyframes test {
  0%   { top:-200px; }
  100% { top:0px;  }
}
@-o-keyframes test {
  0%   { top:-200px; }
  100% {  top:0px;  }
}
@keyframes test {
  0%   { top:-200px; }
  100% { top:0px;  }
}
body{
background-image:url(bois2.png);
background-repeat:repeat x;
}
#container{
margin-top:10px;
width:100%;
height:100%;
}

#box {
margin-top:0px;
font-size:14px;
line-height:100px;
text-align:center;
position :relative;
width :100%;
background-color:rgba(0,0,0,0.8);
height:100px;
color:#fff;
border-bottom: 2px solid rgba(217,27,92,0.5);
  -webkit-animation: test 2s ease; /* Safari 4+ */
  -moz-animation:    test 2s ease; /* Fx 5+ */
  -o-animation:      test 2s ease; /* Opera 12+ */
  animation:         test 2s ease; /* IE 10+, Fx 29+ */
  
 
}
 #moncercle{
 height:100px;
 width:200px;
 
     border-radius: 0 0 100px 100px ;
     -moz-border-radius:0 0  90px 90px ;
     -webkit-border-radius:0 0 90px 90px;
     background-color:rgba(0,0,0,0.8);
	 top:100px;
	 
	 position:relative;
	
	 margin-left:auto;
	 margin-right:auto;
	 
	border-bottom:2px solid rgba(217,27,92,0.5);
	border-left:2px solid rgba(217,27,92,0.5);
	border-right:2px solid rgba(217,27,92,0.5);
	
	z-index:1;
}
et egalement un lien jsfidle :[url=http:]http://jsfiddle.net/team94/gqLefkof/[/url] je ne veux pas voir le trait en haut du demi cercle .

Merci à vous.

Modifié par team94 (27 Oct 2015 - 12:56)
Bonjour,

Sinon, j'ai une version Sioux :
#box::before,
#box::after {
  position: absolute;
  background-color: rgba(217, 27, 92, 0.5);
  bottom: 0;
  height: 2px;
  content:"";
}
#box::before {
  left: 0;
  right: 50%;
  margin-right: 100px;
}
#box::after {
  left: 50%;
  right: 0;
  margin-left: 100px;
}

Et tu vires la bordure sur ta box (+position relative)
Sujet clos
Aller à