Question

使用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>

Answer 1

使用push：

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;
}

CSS形状内的拆分面板文本

1 个答案: