28172 sujets

CSS et mise en forme, CSS3

Supprimer une forme d'une autre forme en CSS

Bonjour ! Je voudrais savoir s'il est possible d'utiliser une technique en CSS pour rendre cet exemple possible !
Alors mon problème c'est que je voudrais supprime le demi-cercle vert du rectangle 1 (gris foncé): http://i.imgur.com/zkxIuno.png
le rond vert doit vraiment être supprimé et pas caché avec une couleur cette partie doit afficher la forme n°2 !
Ce qui donnerait ce résultat: http://i.imgur.com/NTF8tY6.png
Comment est-ce possible ?
Merci!
Bonjour !

À moins que je ne me trompe, tout élément HTML peut être "supprimé" en CSS par display : none...

Dans ce cas, il faudrait savoir si les demi-cercles ont été créés par des éléments HTML ou le résultat d'une opération en CSS...

On peut aussi 'déplacer' le fond d'un background-image pour laisser apparaître ce qui est intéressant...

Bref, tout cela dépend de la façon dont la page est faite, cela sera plus ou moins facile. Il y a aussi la façon dont le changement s'opère...

Smiley smile 
<html>
<head>
<style>

header {
	background-color: #A9A9A9;
	height: 298px;
	width: 100%;
	margin-top: 171px;
	text-align: center;
	color: #303030;
	margin-right: auto;
	margin-left: auto;

	background: rgb(175,175,175); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(175,175,175,1) 0%, rgba(132,132,132,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(175,175,175,1) 0%,rgba(132,132,132,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(175,175,175,1) 0%,rgba(132,132,132,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#848484',GradientType=0 ); /* IE6-9 */
}

header h1 {
	width: 1069px;
	padding-top: 5%;
	text-align: justify;
	margin-right: auto;
	margin-left: auto;
}

#competences {
	background-color: #DCDCDC;
	height: 342px;
	width: 100%;
	display: flex;

	background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.redimension {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	display: flex;
}

.competencesblock {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	width: 15%;
	position: relative;
	top: -48px;
}

.competencesimage {
	background-color: #362f2d;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	border: #008000 solid 20px; /*#e8e8e8*/
	margin-right: auto;
	margin-left: auto;
}

.competencestitre {
	color: #303030;
}

hr {
	color: #303030;
}

.competencesdescription {
	word-wrap: break-word;
	color: #303030;
}

#apropos {
	background-color: white;
	height: 263px;
	width: 100%;
}

#aproposimage {
	height: 100%;
	width: 50%;
	background-color: green;
	float: left;
}

#cercle {
	border-radius: 50%;
	height: 200px;
	width: 200px;
	background-color: #cccccc;
	position: absolute;
	left: 0;
    right: 0;
    margin-top: -99px;
    margin-left: auto;
    margin-right: auto;
   /* margin-right: auto;-webkit-border-radius: 50% / 60% 60% 40% 40%;
    border-radius: 50% / 0 0 100% 100%;*/
}

#apropostext {
	height: 100%;
	width: 50%;
	float: right;
}

#apropostext h2 {
	margin: 0px;
	color: #f36c4f;
	font-size: 40px;
	margin-top: 40px;
	margin-left: 80px;
}

#apropostext p {
	margin: 0px;
	margin-left: 70px;
	margin-top: 10px;
	color: #949494;
}

</style>
</head>
<body>
<header>
	<h1>Excidium quam sudoribus quam incohibili sudoribus saeviore excidium Castricius Seleuciae tuebatur incohibili sudoribus sudoribus legiones.</h1>
</header>

<div id="competences">
<div class="redimension">
	<div class="competencesblock">
		<div class="competencesimage" style="background-image:url('');"></div>
		<div class="competencestitre">Photoshop</div>
		<hr>
		<div class="competencesdescription">dscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvx</div>
	</div>
	<div class="competencesblock">
		<div class="competencesimage" style="background-image:url('');"></div>
		<div class="competencestitre">Photoshop</div>
		<hr>
		<div class="competencesdescription">dscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvx</div>
	</div>
	<div class="competencesblock">
		<div class="competencesimage" style="background-image:url('');"></div>
		<div class="competencestitre">Photoshop</div>
		<hr>
		<div class="competencesdescription">dscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvx</div>
	</div>
	<div class="competencesblock">
		<div class="competencesimage" style="background-image:url('');"></div>
		<div class="competencestitre">Photoshop</div>
		<hr>
		<div class="competencesdescription">dscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvxdscdscjhvjdsqvcqcvxjhsqvx</div>
	</div>
</div>
</div>

<div id="apropos">
	<img id="aproposimage">
	<div id="cercle"></div>
	<div id="apropostext"><h2>A propos de moi</h2><p>kjbqvkjbbedzbedzedjedazjhdezjhdvehvedazedzjhvdazhgdzchgedvcc</p></div>
</div>
</body>
</html>


http://i.imgur.com/lHMCTS7.png Je voudrais que la partie supérieure (qui touche le rectangle 1 gris foncé) du cercle soit supprimé (donc cela est possible en mettant un z-index sur le rectangle 1) par contre je voudrais que la partie inférieure (qui touche le rectangle 2 blanc) supprime une partie de ce rectangle (comme un pathfinder) du coup comme un trou de fromage on verra à la place du vert inférieur le fond du rectangle gris foncé. résultat: http://i.imgur.com/nbU9Ltl.png

Sachant qu'il ne faut en aucun cas "tricher" avec la couleur car le gris sera un dégradé

Merci !
Modifié par Zwordy (04 Aug 2016 - 18:41)
Bonjour !

En effet, d'après le code, le gris est un dégradé (plutôt subtil d'ailleurs, est-il nécessaire ?).

Le problème, dans cette histoire, n'est pas de supprimer un élément mais de dessiner cette structure avec ces arches.

Et effectivement, elle ne peut être que dessiné pour respecter le fond en dégradé.

Mon avis est plutôt de se tourner vers SVG... je ne vois d'autre technique que la forme détourée...

Smiley smile
Modérateur
Hello,

J'ai fais en vitesse une idée que j'ai eu pour ton soucis.

Le but est simplement de donnée un dégradé (de la couleur la plus haute à laquelle tu veux coller) à ton cercle pour n'en dessiner qu'une partie.
Je vois... Le problème c'est que ces codes sont destinés pour un CMS du coup je voudrais rendre la modification la plus simple pour mes utilisateurs. Du coup ces idées ne sont pas vraiment valables si je veux rendre la personnalisation la plus simpliste pour les utilisateurs.

Il est donc impossible de ne pas tricher pour rendre ce résultat réalisable ?
Merci beaucoup pour votre aide !
Modifié par Zwordy (05 Aug 2016 - 20:13)
Sujet clos
Aller à