Question

请帮助绘制pentagon表示css。

我绝对需要五角大楼才能完全填写文字。文本不应超出五边形（溢出：隐藏）。

HTML：

<div class="carousel_gallery" id="carousel_gallery">


    укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>


    </div>

的CSS：

body{
    position: relative;    

}
.carousel_gallery {
    width: 360px;
    height: 365px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -185px;
    border: 1px solid red;
    overflow: hidden;
}
.carousel_gallery:before {
    content: "";
    width: 255px;
    height: 255px;
    margin-left: 52px;
    margin-top: 237px;
    position: absolute;
    border-bottom: 1px solid red;
    border-right: 1px solid red;
    -webkit-transform: rotate(45deg);
    background: white;
}

fiddle

Answer 1

自定义这个五角大楼..希望这会对你有所帮助！

<style type="text/css">
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 top: -170px;
 left: -36px;
 border-width: 0 90px 70px;
 border-style: solid;
 border-color: transparent transparent #abefcd;
 }

/* Content in pentagon */
#pentagon div{
position:absolute;
top:-50px;
}
</style>

<div id="pentagon"><div>you text</div></div>

如何用文字填充五边形？

1 个答案: