Diamond text box

by PhilQ

HTML

<span><div></div><div></div><div></div><div></div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci? Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi. Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibus dam.</p></span>

CSS

*, *:before, *:after{
    box-sizing: border-box;
}

span {
    display: inline-block;
    width: 400px;
    height: 400px;
    background-color: rgba(0,0,0, 0.5);
    float: left;
    position: relative;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

p {
    text-align: justify;
}

div {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: transparent !important;
    shape-margin: 10px;
}

div:nth-child(2) {
    background-color: red;
    float: left;
    shape-outside: polygon(0 0, 100% 0, 0 100%) margin-box;
}

div:nth-child(4) {
    background-color: blue;
    float: left;
    clear: left;
    shape-outside: polygon(0 0, 100% 100%, 0 100%) margin-box;
}

div:nth-child(1) {
    background-color: yellow;
    float: right;
    shape-outside: polygon(0 0, 100% 0, 100% 100%) margin-box;
}

div:nth-child(3) {
    background-color: green;
    float: right;
    clear: right;
    shape-outside: polygon(0 100%, 100% 0%, 100% 100%) margin-box;
}