web-dev-qa-db-fra.com

Paragraphe de texte en cercle avec CSS

Je cherchais une solution rapide et décente pour placer un paragraphe de texte dans un cercle. J'ai trouvé qu'il y a deux solutions.

Solution 1

Float multiple div 's de la même hauteur que le texte à gauche et à droite du texte, et en modifiant les divs width vous ajustez l'espace restant pour le texte.

Solution 2

Utilisez le générateur pour la même chose, http://www.csstextwrap.com/index.php .

BONUS (ne fait pas partie du problème, juste un pourboire)

Je ne cherche pas cela, mais peut-être que quelqu'un pourrait en avoir besoin, et je pense que c'est agréable de l'avoir comme lien> http://csswarp.eleqtriq.com/ C'est un générateur basé sur le Web qui vous aide à envelopper votre texte autour du cercle.

La question?

Existe-t-il une solution plus simple pour insérer un paragraphe de texte dans un cercle sans avoir à ajouter des balises flottantes et des balises supplémentaires. Le slapping d'une image contenant ce texte n'est pas une solution. Dans le meilleur des cas, la solution aurait un balisage HTML propre avec quelques modifications dans le CSS.

htmlcsstextcircleparagraph
24
Nemanja

Le livre d'Eric Meyer "Eric Meyer sur CSS" parle de cela (Projet 10) et les solutions d'habillage de texte que vous avez trouvées utilisent le même principe. 

L'utilisation d'un simple border-radius: 50% n'affecte pas la forme de la zone de contenu, qui est rectangulaire à l'heure actuelle. Par exemple, voir le demo de Kyle Sevenoaks.

Un module CSS3 en cours de développement traite de ce problème: 

http://dev.w3.org/csswg/css-shapes

Cependant, cette spécification est toujours en mode brouillon et n'est actuellement pas prise en charge, probablement dans un an ou deux.

La réponse courte est non, mais j'espère que les commentaires fourniront un aperçu.

23
Marc Audet

salut je pense sans js je pense que ce n'est pas possible alors utilisez js et css3  

.badge {
  position: relative;
  width: 400px;
  border-radius: 50%;
  -webkit-transform: rotate(-50deg);
  -moz-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  -o-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  -webkit-transform-Origin: bottom center;
  -moz-transform-Origin: bottom center;
  -ms-transform-Origin: bottom center;
  -o-transform-Origin: bottom center;
  transform-Origin: bottom center;
}

.char1 {
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  transform: rotate(6deg);
}

.char2 {
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -o-transform: rotate(12deg);
  transform: rotate(12deg);
}



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://css-tricks.com/examples/BlurredText/js/jquery.lettering.js"></script>
<script>
    $(function() {
        $("h1").lettering();
    });
</script>

</head>

<body>

    <div id="page-wrap">

        <div class="badge">
          <h1>Established 2012</h1>
        </div>

    </div>

</body>

</html>
2
Pankaj Tiwari
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="250"></canvas>
    <script>
      function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
        var len = str.length, s;
        context.save();
        context.translate(centerX, centerY);
        context.rotate(-1 * angle / 2);
        context.rotate(-1 * (angle / len) / 2);
        for(var n = 0; n < len; n++) {
          context.rotate(angle / len);
          context.save();
          context.translate(0, -1 * radius);
          s = str[n];
          context.fillText(s, 0, 0);
          context.restore();
        }
        context.restore();
      }
      var canvas = document.getElementById('myCanvas'), 
        context = canvas.getContext('2d'),
        centerX = canvas.width / 2,
        centerY = canvas.height - 30,
        angle = Math.PI * 0.8,
        radius = 150;

      context.font = '30pt Calibri';
      context.textAlign = 'center';
      context.fillStyle = 'blue';
      context.strokeStyle = 'blue';
      context.lineWidth = 4;
      drawTextAlongArc(context, 'Text along arc path', centerX, centerY, radius, angle);

      // draw circle underneath text
      context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false);
      context.stroke();
    </script>
  </body>
</html>

CLIQUEZ ICI pour une autre solution (jsfiddle).

1
Sandy

un orignal (?) ... cover!

    function writeInCircle(phrase, cx, cy, fontSize) {
        var num = phrase.length
        var r = num * fontSize / 6
        var d = $("<div>").addClass("writeInCircle").appendTo("body")
        $(d).css({position:"absolute",
                   width: (2*r) + "px",
                  height: (2*r) + "px",
                  left: (cx-r) + "px",
                  top:  (cy-r) + "px"})
        for (var i=0; i < num; i++) {
           var s = $("<span>").html( phrase.charAt(i)).appendTo(d)
           a = i/num *2*Math.PI
           var x = cx   + r*Math.cos(a) 
           var y = cy  + r*Math.sin(a)
           $(s).css({"position":"absolute",
                 left: x + "px", top: y + "px",
                 "fontSize": fontSize, "transform":"rotate(" + a + "rad)" })
           console.log(z.charAt(i) + " " + x + "," + y)
        }
    }

voir http://jsfiddle.net/alemarch/42o8hqb7/http://jsfiddle.net/alemarch/42o8hqb7/1/http://jsfiddle.net/alemarch/42o8hqb7/2/http://jsfiddle.net/alemarch/42o8hqb7/3/

1
Alessandro Marchisio

La réponse la plus applicable que j'ai trouvée se trouve ici: 

Il est plus facile d’utiliser cette méthode et de simplement masquer le débordement/utiliser un texte qui convient plutôt que de déborder. 

Découper la forme (triangle) de div et afficher l'arrière-plan derrière

0
Joe Corby