「これからのための気持ちの整理。 」

これからのことを考えています。本当に、本当にめんどうくさい、めんどくさい人間です。これからのために、気持ちの整理をします。

(css) 四角形下部borderを弛ませたセクションの実装

f:id:boosuket:20210429095947p:plain

width:200% で border-bottom-right-radius: 47%、border-bottom-left-radius: 47%、margin-left: -50%

さらにセクションのコンテナにoverflow: hidden を設定して横に飛び出した部分の表示をしないようにする。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="sct section1">
            <p>section1</p>
        </div>
        <div class="sct section2">
            <p>section2</p>
        </div>
    </div>
</body>
<style>
.container {
    height: 100%;
    overflow: hidden;
}
.sct {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.section1 {
    height: 60%;
    background-color:cornflowerblue;
    width: 200%;
    border-bottom-right-radius: 47%;
    border-bottom-left-radius: 47%;
    margin-left: -50%;
    
}
.section2 {
    height: 40%;
}
body {
    height: 100vh;
}
</style>
</html>

弛みを緩やかにする

width:245% で margin-left: -72.5% を設定する。

.section1 {
    height: 60%;
    background-color: cornflowerblue;
    width: 245%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    margin-left: -72.5%;
}

このように少し緩やかな弛みになります。 f:id:boosuket:20210430083102p:plain

以上です。