时间戳

首页 > 解决方案 > 在 CSS 形状内拆分面板文本

css - 在 CSS 形状内拆分面板文本

问题描述

使用 HTML 和 CSS。

我有 2 组文本。我想要在钻石内部线的每一侧都有一个，钻石完全由 CSS 以及内部的分隔线制成。

不太确定如何做到这一点。我尝试以某种方式对齐文本，也尝试浮动文本，但均未成功。

非常感谢您的帮助。

body{
  background-color: pink;
}

/*Developer Section*/
#developer{
    width: 100%;
    height: 100vh;
}

.diamond{
    position: relative;
    width: 600px;
    height: 600px;
    border: 5px solid #65C8D0;
    background-color: #65C8D0;
    margin: auto;
    margin-top: 300px; 
    transform: rotate(45deg);
}

.headshot{
    position: relative;
    z-index: inherit;
    background-color: black;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 5px solid #65C8D0;
    margin: auto;
    margin-top: -850px;
}
.developer-inner{
    position: relative;
    color: whitesmoke;
    z-index: 1;
    text-align: center;
}

.headshot-text h1{
    font-weight: bold;
}

.split{
    width: 3px;
    height: 400px;
    background-color: whitesmoke;
    margin: auto;
}
<!--Dev Section-->
        <section id="developer">
            <div class="diamond"></div>
            <div class="headshot"></div>
            <div class="developer-inner">
                <div class="headshot-text">
                    <h1>Lorem Lorem</h1>
                </div>    
                <div class="developer-about">
                    <div class="dev-panel-left">
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        </p>
                    </div>
                    <div class="split"></div>
                    <div class="dev-panel-right">
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        </p>
                    </div>
                </div>
            </div>
        </section>

标签： css

解决方案

使用flex：

body{
  background-color: pink;
}

/*Developer Section*/
#developer{
    width: 100%;
    height: 100vh;
}

.diamond{
    position: relative;
    width: 600px;
    height: 600px;
    border: 5px solid #65C8D0;
    background-color: #65C8D0;
    margin: auto;
    margin-top: 300px; 
    transform: rotate(45deg);
}

.headshot{
    position: relative;
    z-index: inherit;
    background-color: black;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 5px solid #65C8D0;
    margin: auto;
    margin-top: -850px;
}

.developer-about {display:flex; align-items:center}

.developer-inner {
    position: relative;
    color: whitesmoke;
    z-index: 1;
    text-align: center;
    padding:0 40px;
}

.headshot-text h1{
    font-weight: bold;
}

.split{
    width: 3px;
    height: 400px;
    background-color: whitesmoke;
    margin: 0 40px;
}
<!--Dev Section-->
        <section id="developer">
            <div class="diamond"></div>
            <div class="headshot"></div>
            <div class="developer-inner">
                <div class="headshot-text">
                    <h1>Lorem Lorem</h1>
                </div>    
                <div class="developer-about">
                    <div class="dev-panel-left">
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        </p>
                    </div>
                    <div class="split"></div>
                    <div class="dev-panel-right">
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        </p>
                    </div>
                </div>
            </div>
        </section>

推荐阅读