JeuWeb Créez votre jeu par navigateur !

@lucard · 12-03-2015, 05:10 PM

Le problème des triangle css, c'est qu'on ne peut pas mettre un border dessus. (puisque c'en est déjà)

petit exemple :



<html>

	<div class="header">

		<div class="top">Title</div>

		<div class="bottom">test</div>

	</div>

</html>

*{

	margin:0;

	padding:0;

}

html{

	background-color:black;

}

div{

	text-align:center;

	color:white;

}

div.top{

	height :50px;

	background-color:rgba(0,150,255,0.5);

}

div.bottom{

	margin:auto;

	height:20px;

	width:500px;

	background-color:rgba(0,150,255,0.5);

}

div.bottom::before{

	content:"";

	display:block;

	float:right;

	height:0px;

	width:0px;

	margin-right:-20px;

	background-color:transparent;

	border-top: 10px rgba(0,150,255,0.5) solid;

	border-left: 10px rgba(0,150,255,0.5) solid;

	border-right: 10px transparent solid;

	border-bottom: 10px transparent solid;

}

div.bottom::after{

	content:"";

	display:block;

	float:left;

	height:0px;

	width:0px;

	margin-left:-20px;

	background-color:transparent;

	border-right: 10px rgba(0,150,255,0.5) solid;

	border-top: 10px rgba(0,150,255,0.5) solid;

	border-left: 10px transparent solid;

	border-bottom: 10px transparent solid;

}

à voir si une image en png (avec un repeat-x) ne serait pas plus judicieux.