Как сделать что-то похожее на книжку? [закрыт]

.book { 
    background-color:pink; 
    width:200px; 
    height:100px; 
    position:relative; 
    margin:50px; 
} 
 
.book:before, .book:after { 
    content:""; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background-color:inherit; 
    z-index:-1; 
} 
 
.book:before {transform:skewY(10deg);} 
 
.book:after  {transform:skewY(-10deg);}

<div class="book">book</div>

body{ 
background:#999;} 
.kwadrat{ 
position:relative; 
width:150px; 
height:150px; 
overflow:hidden; 
z-index:2; 
} 
.kwadrat p{ 
font-size:24px; 
color:white; 
text-align:center; 
padding-top:40px; 
position:relative; 
z-index:99;} 
.kwadrat::before{ 
content:''; 
position:absolute; 
bottom:0; 
right:0; 
	border-top: 75px solid transparent; 
	border-right: 175px solid red; 
	border-bottom: 75px solid transparent; 
  z-index:0; 
} 
.kwadrat::after{ 
content:''; 
position:absolute; 
bottom:0; 
left:0; 
	border-top: 75px solid transparent; 
	border-left: 175px solid red; 
	border-bottom: 75px solid transparent; 
  z-index:0; 
}

<div class="kwadrat"> 
  <p>Portfolio</p> 
</div>

body { 
  background-color: black; 
} 
#triangle1 { 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-top: 70px solid transparent; 
    border-left: 240px solid white; 
    border-bottom: 70px solid transparent; 
} 
#triangle2 { 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-top: 70px solid transparent; 
    border-right: 240px solid white; 
    border-bottom: 70px solid transparent; 
} 
#text { 
  position: absolute; 
  border-top: 60px solid transparent; 
  border-left: 90px solid transparent; 
}

    <div id="triangle1"></div> 
    <div id="triangle2"></div> 
    <div id="text">portfolio</div>

body { 
  background: linear-gradient(to right, #b2d9f7 45%, #404040 50%); 
} 
 
.butterfly { 
  position: relative; 
  top: 85px; 
  left: 55px; 
  width: 218px; 
  height: 178px; 
  color: #00b2ab; 
  font: bold 26px/178px 'Arial'; 
  text-align: center; 
} 
 
.butterfly:first-letter { 
  color: black; 
} 
 
.butterfly:before, 
.butterfly:after { 
  content: ''; 
  position: absolute; 
  z-index: -1; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%; 
  box-sizing: border-box; 
  border-style: solid; 
} 
 
.butterfly:before { 
  border-color: transparent transparent transparent white; 
  border-width: 69px 0 69px 218px; 
} 
 
.butterfly:after { 
  border-color: transparent white transparent transparent; 
  border-width: 69px 218px 69px 0; 
}

<div class="butterfly">ПОРТФОЛИО</div>

    .angle4 { 
        position: relative; 
        height: auto; 
        width: 0; 
        border-style: solid; 
        border-width: 30px 150px; 
        border-color: transparent #f0f; 
    } 
 
    .wrap { 
        position: relative; 
        margin-left: -100px; 
        margin-right: -100px; 
        padding: 45px 0; 
        text-align: center; 
    }

<div class="angle4"> 
    <div class="wrap">Какой-то текст</div> 
</div>