shape-outside property not working at all

问题

I have just started trying out the shape-outside property in css but I am not able to make it work,no matter how many documentation or blogs I go through. I may have done a silly mistake but I am not not sure about it. Can someone point out the mistake?

#q {
  background-color: #E6C9C9;
  /*height: 100%;
	width: 100%;*/
  float: left !important;
  -webkit-shape-outside: circle(50%);
  shape-outside: circle(50%);
}

<html>

<head>
  <title>Testing Split Div</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo
        tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem.
        Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes te
        est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. Ad sea error labore percipitur.
        Amet liber adipiscing vel in, virtute laboramus est ad, an nam probatus convenire definiebas. An ius facete latine epicurei. Aeque dicunt sed cu, vidisse complectitur an per, mel ea quem repudiare. Mel ex liber laoreet, cu eam altera accommodare
        consectetuer, illum veritus consetetur pro ad. Hendrerit appellantur adversarium his te, suas liberavisse qui at, rebum ipsum ut mea. Duo ut quodsi accusamus.</div>

    </div>

</body>

</html>

回答1:

You can't use the outside-shape on the element itself, but you can use :before or :after pseudo-element to add a outside-shape to the element. See the following solution using :before:

#q:before {
  content:"";
  display:block;
  height:300px;
  width:300px;
  float: left;
  -webkit-shape-outside: circle(50%);
  shape-outside: circle(50%);
}
#q {
  background-color: #E6C9C9;
}

<html>
  <head>
    <title>Testing Split Div</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles.css">
  </head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo
        tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem.
        Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes te
        est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. Ad sea error labore percipitur.
        Amet liber adipiscing vel in, virtute laboramus est ad, an nam probatus convenire definiebas. An ius facete latine epicurei. Aeque dicunt sed cu, vidisse complectitur an per, mel ea quem repudiare. Mel ex liber laoreet, cu eam altera accommodare
        consectetuer, illum veritus consetetur pro ad. Hendrerit appellantur adversarium his te, suas liberavisse qui at, rebum ipsum ut mea. Duo ut quodsi accusamus.</div>
      </div>
    </div>
  </body>
</html>

来源：https://stackoverflow.com/questions/44196210/shape-outside-property-not-working-at-all

标签

css

css-shapes

clip-path