全屏
 <svg height="0" width="0">
      <clipPath id="blob">
      <path d="M24.6,-43.8C29.8,-39.6,30.7,-28.9,42.4,-20.5C54,-12.1,76.5,-6.1,83.8,4.2C91.1,14.5,83.1,28.9,73.3,40.5C63.5,52.1,59.8,60.7,39.2,59.2C26.7,57.7,13.4,46.1,-0.4,46.8C-14.2,47.5,-28.3,60.5,-41.2,62.2C-54,63.9,-65.6,54.2,-66.1,41.9C-66.5,29.7,-55.9,14.8,-56.4,-0.3C-57,-15.4,-68.6,-30.9,-65.8,-39C-62.9,-47.2,-45.6,-48.1,-32.2,-47.7C-18.9,-47.2,-9.4,-45.4,0.1,-45.6C9.7,-45.8,19.3,-48,24.6,-43.8Z" transform="translate(200 150)" />
      </clipPath>
    </svg>
    
    
    <div class="container">
      <img src="5984697d-c5e8-4a63-a765-7e7ac3916fc0_round-balloon.jpg">
      
      <img src="5984697d-c5e8-4a63-a765-7e7ac3916fc0_round-balloon.jpg" class="clipped">
         
    </div>
/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

/* CSS files add styling rules to your content */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

.container {
  
}

.box {
  background-color: #EEE5E9;
  padding: 20px;
  border: 20px solid #CF5C36;
  width: 200px;
  height: 100px;
  display: inline-block;
}

.clipped {
  clip-path: url(#blob);
}
返回