html5编写心形边框放图片,CSS3心型形状边框

css

html {

height: 100%;

}

body {

background-color: mistyrose;

font-family: 'Montez', cursive;

}

#container {

width: 1000px;

height: 500px;

margin: 0 auto;

}

span {

color: transparent;

}

#left {

float: left;

height: 500px;

width: 500px;

shape-outside: polygon(51.33% 12px, 100.03% 2.17%, 97.87% 19.59%, 92.11% 16.84%, 83.26% 12.61%, 72.27% 12.33%, 59.8% 17.47%, 53.86% 27.8%, 52.21% 37.23%, 58.14% 52.53%, 68.47% 64.73%, 99% 87%, 217px 86.93%);

}

#right {

float: right;

height: 500px;

width: 500px;

shape-outside: polygon(70.33% 13px, 0.92% 2.68%, 0.92% 19.57%, 5.42% 18.47%, 9.85% 15.59%, 23.11% 11.65%, 32.26% 13.97%, 38.67% 16.73%, 43.4% 23.07%, 47.06% 29.8%, 46.41% 44.23%, 38.14% 57.33%, 26.67% 68.73%, 0.4% 87%, 353px 84.73%);

}

p {

text-align: justify;

color: #922a2a;

}

p:before {

content: "Hello World";

position: absolute;

font-size: 75px;

top: 40px;

letter-spacing: 8px;

word-spacing: 11px;

white-space: nowrap;

}

#span2 {

color: inherit;

}