Blog d'aide de Blog4ever

Bonjour, 

Je sais qu'avec la mention radius on peut faire du simple coin arrondi aux formes diverses plus au moins ovales ou biscornues, Mais je ne trouve pas comment faire un creux arrondi, Quel est le terme? 
Merci et bonne journée, 
Mi Neth, 

Dernière modification le vendredi 20 Novembre 2020 à 11:07:53

:b0:Mi Neth:ch:





Il n'y a pas de terme Html :ptdr:

Ce n'est pas faisable en une seule ligne.

Je te préviens il faut utilisé le Css et une div pour faire ce code "coin arrondi inversé", et ça tiens plus de l'expérience qu'autre chose.

J'ai trouvé un code mais je n'ai pas testé, car pas le temps je fais ma déco de 

 :oe: Ici

Dernière modification le vendredi 20 Novembre 2020 à 13:33:48

bonjour

Un creux arrondi ?


background: #;
  -webkit-mask-image: radial-gradient(circle 20px at 0 0, transparent 0, transparent 30px, blue 30px);
 }   

Bonsoir Stef et Simon et merci, 

Merci Stef le lien que tu me proposes est un de ceux que j'ai consulté et où j'ai vu que ça allait grave me prendre la tête, 
Merci Simon, 
Jouer avec la transparence, ce n'est pas bête, 
Je me disais que si je ne trouvais pas, je m'en remettrais à mon bon vieux fofofiltre, 
Merci, je vais tester, 
Bonne soirée à vous deux, 
Mi Neth, 

Bonsoir, 
Je teste toutes les solutions que je trouve, Les vôtres, comme celles du web, 
Pour l'heure le mieux que je suis parvenue à réaliser, c'est obtenir un angle creux dans un bloc, mais pas sur mon image, Je vais tenter avec un cadre, 
Je ne laisse pas tomber, vais bien finir par y parvenir, 
Merci d'être là, :ch:

Stef garde ce côté taquin, c'est du sourire et ça fait du bien, Merci, 

Bonjour, 

J'ai refais des essais et j'arrive à faire des angles creux avec des boîtes, mais pas avec une image, 
Depuis, j'ai appris de nouveaux termes, 
shape, chanfrein, bevel, scoop , 
Ça ne m'aide que pour la version boîte, 
Je sais qu'il faut associé comme cet exemple,

.box {  background-color: #3498DB;  border-corner-shape: scoop;  border-radius: 30px;  width: 200px;  height: 200px;}

le hic, c'est que lorsque je tente un remplacement par background-image: ...
ça ne donne rien ou alors, c'est du grand n'importe quoi, voici le lien qui m'a le plus aidé, 
LIEN

Merci pour l'aide, 
Là, je vais faire autre chose, parce que j'ai la cervelle en vrac, 
Bonne journée, 
Mi Neth, 

:b1: Mi Neth:ch:

Oh la la tu patauges dans la semoule et tu t'éloignes .

Je t'ai donné pourtant un lien plus haut pour faire un coin renversé sur une image.
Il y'a 4 codes et toi pas beaucoup regarder  :ppc:
car un de ces codes le Css

background: ;
  -webkit-mask-image: radial-gradient
Qui fait un coin renversé et le même code que celui de simon

Voila ce code avec Css et une div

#aux-container {
  width: 300px;/* largeur de l'mage */ 
  height: 300px;/* hauteur de l'image*/ 
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 20px at 0 0, transparent 0px, transparent 40px, black 41px);
}

<*div id="aux-container"*>
  <*img src="url de ton image" *>
  <*/div>

Sans les *

Et voila ce que ça donne.
Une souris  a grignoté le coin en haut à gauche de mon image.



Dernière modification le lundi 23 Novembre 2020 à 19:45:15

re

On peut aussi inverser l'angle.

Bravo @stef@

 -webkit-mask-image: radial-gradient(circle 10px at 90% 0, transparent 20px, transparent 40px, black 20px);

:b0:simon et merci :am:

J'avais trouvé plus simple pour inverser l'angle.


Ce que j'ai souligné en rouge , le code  vient d'un lien (source) du lien que j'ai mis plus haut.




Voila ce que ça donne

Pour le coin renversé en bas à droite

-webkit-mask-image: radial-gradient(circle at bottom right, transparent 0px, transparent 40px, black 41px);



Pour faire un coin renversé en bas à gauche

-webkit-mask-image: radial-gradient(circle at bottom left, transparent 0px, transparent 40px, black 41px);



Pour faire un coin renversé en haut à droite:

-webkit-mask-image: radial-gradient(circle at top right, transparent 0px, transparent 40px, black 41px);



Dernière modification le mardi 24 Novembre 2020 à 15:15:19

Bonsoir, 
Merci à tous les deux, 
Ne m'en veux pas Simon, mais ce sont surtout les solutions apportées par Stef qui m'aident, 
Je progresse et parviens à faire un angle creux, à droite, à gauche, en haut en bas, Mais un seul, Et j'ai fini par réussir à mettre mon image dans le bloc couleur, 
J'ai tenté d'insérer le code avec les quatre possibilités, ça ne prend qu'un angle en compte, 
Mais je progresse et c'est déjà top, 
Passez une bonne nuitée tous les deux, 
Mi Neth, 

Bonjour, 
Comme dis plus haut, c'est bon pour un angle, 
J'arrive même à faire un creux sur une arrête, Comme sur cette image,



Mais dès que je tente au minimum deux angles, Soi je n'en ai qu'un seul, soi rien, 
Un, c'est déjà bien, puisque c'est ma demande, Mais si je pouvais, en faire jusque 4 pour une forme cubique, ce serait cool, 
J'y retourne, 
Bonne journée, 
Mi Neth, 

re

Les 4 coins ?

Bonsoir, Simon, 

Je vois que je t'es froissé, ce n'était pas le but, Simplement, je ne sais pas pourquoi?  mais les codes que tu as mis et qui pourtant rejoignent ceux de Stef, ça ne veut rien savoir,  Ça n'empêche que j'apprécie, aussi, ton aide, 
bonne nuitée, 
Mi Neth, 

re

@Stef @ est très gentil et je salue  l'aide qu'il apporte.

Il faut comprendre que parfois pour résoudre un problème ça demande de la recherche et des essais et aussi beaucoup de temps.

Tu aurais pu juste tenir compte des codes de Stef sans me dire que mes efforts pour t'aider n'étaient pas importants....

Les codes de stef sont très bien pour un angle mais ce n'est pas la solution pour en faire 4.

Ta demande de départ était de faire un angle inversé et donc la solution est trouvée.

Je ne suis pas froissé mais juste déçu. Rien de grave car parfois il m'arrive aussi d'être maladroit et donc je n'ai aucune rancune.

(Tu aurais pu juste tenir compte des codes de Stef sans me dire que mes efforts pour t'aider n'étaient pas importants....)

C'est vrai, c'était maladroit, mais loin de moi de dire que tes efforts ne sont pas importants, 
Je sais le temps qu'il faut, 
Désolée, 

Tu peux clore ce post, comme tu le dis, la solution à ma demande est résolue, 
Merci, 

Non je ne ferme pas ce post car ce serait impoli pour Stef qui a été le premier à donner des solutions.

Voici une image avec 4 coins

https://labodeSimon.blog4ever.com/4-coins-bateau

Attention aux étoiles *

<*div class="box"><*p class="boxBtm"*>
 <*img src="https://static.blog4ever.com/2010/11/451105/img0308-1_8618988.jpg"><*/p>
 <*/div> 
 

 
 <*style type= "text/css"*>
 .box  {
    background: #ccc;
    height: 389px;  /*taille image*/
    width: 518px;
    margin: 25px 0 0 30px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.box :before {
    content: "";
    display: block;
    background: #ccc;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 60px;
    height: 60px;
    border-radius: 20px;
}
.box :after{
    content: "";
    display: block;
    background: #ccc;
    position: absolute;
    top: -9px;
    right: -9px;
    width: 60px;
    height:60px;
    border-radius: 20px;
}
.box  p {
    color: #fafafa;
}
.box:before {
    content: "";
    display: block;
    background: #ccc;
    position: absolute;
    bottom: -9px;
    left: -9px;
    width: 60px;
    height: 60px;
    border-radius: 20px;
}
.box:after{
    content: "";
    display: block;
    background: #ccc;
    position: absolute;
    bottom: -9px;
    right: -9px;
    width: 60px;
    height: 60px;
    border-radius: 20px;
}


<*/style>

:b0:simon et Mi Neth:ch:


Je ne connais pas bien, ni l'habitude d'utiliser cette technique  after et before pour crée des nouveaux éléments.

simon


 également de ne pas avoir fermer ce post.  c'est bon ça fait 2 jours que je cherche , fait des essais et je n'arrive pas à faire les 4 coins pour une image je jette l'éponge.

Décidément, je vais de maladresse en ingratitude, 
Merci Simon de ne pas avoir fermé, J'ai oublié que Stef c'est beaucoup impliqué, 
Non que je ne pense qu'à moi, je ne pense pas du tout, ou à rien, J'ai la tête ailleurs à trop réfléchir, C'est pire, je vous en occulte, 
Encore merci à tous les deux, Simon, je testerai ta proposition plus tard, pour l'heure, je crois qu'une pause s'impose, 
...il n'y a pas de smile avec la petit pancarte "sorry"...

@Stef@   @Mi Neth@





Tu verras que les angles sont à 60px et le--->  .box est adapté à l'image donc 150x510

Les angles peuvent être à 50/50
on peut aussi régler le -9

Chaque coin est conditionné par top left ou bottom left .....etc


Avant/après 4 fois

Le background est gris comme le fond de page......





<*div class="box"><*p class="boxBtm"*>
 <*img src="https://static.blog4ever.com/2017/11/840775/Bannii--re-noel-2020.png"><*/p>
 <*/div> 




 <*style type= "text/css"*>
.box  {
    background: #ccc;
    height: 150px;
    width: 510px;
    margin: 25px 0 0 30px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.box :before {
    content: "";
    display: block;
    background: #ccc;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 60px;
    height: 60px;
    border-radius: 20px;
}
.box :after{
    content: "";
    display: block;
    background: #ccc;
    position: absolute;
    top: -9px;
    right: -9px;
    width: 60px;
    height:60px;
    border-radius: 20px;
}
.box  p {
    color: #fafafa;
}
.box:before {
    content: "";
    display: block;
    background: #ccc;
    position: absolute;
    bottom: -9px;
    left: -9px;
    width: 60px;
    height: 60px;
    border-radius: 20px;
}
.box:after{
    content: "";
    display: block;
    background: #ccc;
    position: absolute;
    bottom: -9px;
    right: -9px;
    width: 60px;
    height: 60px;
    border-radius: 20px;
}

simonet Mi Neth:ch:

Je viens de testé c'est super



J'ai fait quelques modif dans le code:

Agrandis les coins "arrondis renversée"
width: 40px;
    height: 40px;
    border-radius: 40px;

Surtout enlever les marges de la box pour pouvoir ajouter une bordure dans les coins
 margin: 0px 0 0 0px;
    padding: 0px;

 Ajouter une bordure rouge dans les coins.
 border : 2px solid #cc0000;

 
Et utilisé background-image : url(''); pour utilisé mon image de fond (texture rouge)


 Voila mon image initiale



Dernière modification le jeudi 26 Novembre 2020 à 19:39:35

:am:

Joli exercice avec un cadre assorti.

Bonsoir, Merci à tous les deux, 

J'ai encore besoin de faire quelques réglages, mais j'obtiens déjà de bons résultats, 
Avant d'aller me glisser dans les bras de Morphée pour voir tout ça, à tête reposée, j'ai deux questions, 
C'est quoi BoxBtm? 
Et à quoi correspond la color fafafa? Car je l'ai changé par un vert criard et supprimer provisoirement mon image pour voir, Et je n'ai vu que la box dans le bleu que j'ai choisi, 
C'est tout pour aujourd'hui, 
Bonne nuitée, 
Mi Neth, 

re

Ce n'est pas indispensable et fait partie d'un autre code interne.

On peut écrire plus simple:

<*div class="box">
 <*img src="https://static.blog4ever.com/2017/11/840775/Bannii--re-noel-2020.png">
 <*/div> 
________________________________

Souvent on ajoute une classe pour coder en css donc ce qui compte c'est "box" qui va permettre de faire un code css.

On peut aussi remplacer "box" par autre chose c'est juste un moyen de communiquer en css. comme aside , footer, etc ...


fafafa; c'est blanc comme ffffff;

Bonjour simon et merci pour ces précisions, 
J'apprécie parce que je n'aime pas faire les choses à l'aveugle, si je peux dire comme ça, J'aime bien comprendre ou du moins essayer, 
Je verrai à poursuivre mes tests après mon repas, 
Et je reviendrai donner des nouvelles, 
Bonne matinée, 
Mi Neth, 

<*div class="box"><*p class="boxBtm">
 <*img src="https://static.blog4ever.com/2006/01/2/avatar_2_1609860_202009031205175.jpg"><*/p>
 <*/div> 


.box  {
    background: #000; /* font noir*/
    height: 109px;  /* taille image*/
    width: 100px;
    margin: 25px 0 0 30px;
    border:2px solid blue; /* encadrement blue*/
    border-radius: 20px;
    Comprendre le padding dans ce code

    padding: 20px;    /*si on touche le padding il faut régler tous les autres paramètres*/
    position: relative;
    overflow: hidden;
}
.box :before {
    content: "";
    display: block;
    background: #000;/* font noir*/
    position: absolute;
    top: -10px;  /* profondeur courbe*/
    left: -10px;
    width: 50px;   /* radius inversée*/
    height: 50px;
    border-radius: 20px;
}
.box :after{
    content: "";
    display: block;
    background: #000;/* font noir*/
    position: absolute;
    top: -10px;
    right: -10px;
    width: 50px;
    height:50px;
    border-radius: 20px;
}
.box  p {
    color: #fafafa;
}
.box:before {
    content: "";
    display: block;
    background: #000;/* font noir*/
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 50px;
    height: 50px;
    border-radius: 20px;
}
.box:after{
    content: "";
    display: block;
    background: #000;/* font noir*/
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 50px;
    height: 50px;
    border-radius: 20px;
}

on joue sur les radius et les moins... et les coins sont carrés

Coin, coin, 
Le vilain petit canard le retour, 
Pas encore ça, mais je vais y arriver, Y'a pas de raison, 



Je n'arrive pas à faire mes angles du haut identiques à ceux du bas, Je crois que l'image est mal centrée, 

Bonne soirée, 
Je m'absente quelques heures, Z'allez pouvoir souffler, :bye:

Mi Neth, 

PS: Simon, j'ai oublié de te demander si tu voulais bien éditer le titre de mon post par quelque chose qui convient plus?
Merci, 

Dernière modification le vendredi 27 Novembre 2020 à 16:35:32

re

Je ne t'ai pas donné le bon code    car il faut mettre la partie en gras qui concerne l'ensemble des 4 codes.

Erreur de ma part.

J'ai corrigé ton code et aussi supprimé l'image dans l'article car elle doit se mettre dans le code.

<*div class="box"><*p class="boxBtm">
 <*img src="https://static.blog4ever.com/2020/03/857029/img-def-haut-cat_8836872.jpg"><*/p>
 <*/div>

____________________

regardes le code---->" codangl concave " il y a le code HTML et Css

___________________