Question

我想用CSS创建磨砂玻璃六角形。我设法用svg创建了一个六边形，但无法在其上应用透明玻璃。这是我尝试过的。

svg{
    
    width:500px;
    height: 300px;
    margin:0 auto;
    position: absolute;
    overflow: hidden;
}



.node {
    position: absolute;
    width: 100px;
    height: 50px;
}

.hex-title {
    width:50px;
    height: 10px;
    font-size:8px;
}

.list {
    list-style: none;
    font-size: 6px;
    margin: 0;
    padding: 0;
}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <polygon fill="transparent"
                 fill-opacity=".7"
                 stroke="#000"
                 stroke-width="2"
                 points="50 1 95 25 95 75 50 99 5 75 5 25"/>

     <foreignobject class="node" x="25" y="25">
        <div class="hex-title">Hexagone 1</div>                
     </foreignobject>
    <foreignobject class="node" x="25" y="45">
      <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>                
    </foreignobject>
</svg>

Answer 1

编辑：在添加图片之前回答。请查看下面的注释，以了解反射效果。

我认为您已经实现了想要的目标（之所以如此，是因为我看到您的不透明度值已设置且小于1）。

如果要使不透明起作用，则需要具有可见的颜色，而不是六角形中定义的透明。

如果要在六边形后面渲染东西，则需要在六边形之外声明这些东西。

例如在下面的代码段中，我使用白色。

svg{
    
    width:500px;
    height: 300px;
    margin:0 auto;
    position: absolute;
    overflow: hidden;
}

.node {
    position: absolute;
    width: 100px;
    height: 50px;
}

.hex-title {
    width:50px;
    height: 10px;
    font-size:8px;
}

.list {
    list-style: none;
    font-size: 6px;
    margin: 0;
    padding: 0;
}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon
        fill="white"
        fill-opacity=".7"
        stroke="#000"
        stroke-width="2"
        points="50 1 95 25 95 75 50 99 5 75 5 25"
    />
        <foreignobject class="node" x="25" y="25">
            <div class="hex-title">Hexagone 1</div>                
        </foreignobject>
    <foreignobject class="node" x="25" y="45">
        <ul class="list">
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>                
    </foreignobject>
</svg>
<div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique urna turpis. Phasellus eget justo eget nisl molestie euismod id in nunc. Nulla hendrerit luctus vulputate. Fusce vel mauris ultricies purus varius vestibulum. Morbi id semper orci. Donec ac euismod lectus. Etiam laoreet erat nibh, blandit rhoncus neque dictum quis. Quisque lobortis mi et gravida lobortis. Nam facilisis tortor neque, vel dictum quam sodales sit amet. Donec vitae mauris quis erat viverra lacinia.

Mauris venenatis leo id scelerisque posuere. Integer eget dictum urna. Maecenas interdum dolor felis, et congue orci convallis in. Vivamus quis gravida nulla. Donec ac ligula odio. Suspendisse ut ex suscipit, lobortis tortor nec, tempor libero. Aliquam erat volutpat. Nulla et fringilla eros, nec malesuada sapien. Aliquam fringilla, neque eu tristique ullamcorper, tellus nisl accumsan nulla, sed dignissim nulla velit id leo.

Curabitur eu facilisis augue. Pellentesque et felis pretium, consequat eros vel, feugiat justo. Donec a ultricies tellus, quis congue tortor. Aenean vitae sagittis elit. Vivamus a ligula libero. Pellentesque egestas, tortor eu efficitur ultrices, quam diam porttitor sem, quis venenatis libero eros id neque. Morbi tellus lorem, interdum lobortis lacinia a, facilisis in neque.
</div>

如何使用CSS创建玻璃透明六边形

1 个答案: