html - 如何用文本填充五边形？

请帮助绘制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

最佳答案

定制这个五边形..希望这对您有帮助！

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

关于html - 如何用文本填充五边形？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24606527/