html - 在html中制作一个特定形状的链接

Question

我正在使用网格系统来展示网站的团队部分，在网格系统中我有 8 个部分，每个部分都有指向其他页面的单独链接，这 8 个部分中的每个部分都有一个圆形图像，我想知道如何才能使链接仅符合圆形而不符合以前默认的方形:

注意:这不是完整的网格只有一个部分

       //this makes the circle image
       div.Circ{
       margin: 20px auto;
       border-radius: 50%; 
       width: 200px;
       height: 200px;   
       }

<div class="container">
            <div class="row">
                <div class="six columns">
                        <a href="#2" id="myBtn"></a><div class="Circ"></div></a>
                        <div class="textUnderline">
                            <p>Mentors</p>
                        </div>
                    
                </div>
                <div class="six columns">
                    <a href="#1" id="driveBtn"><div class="Circ">
                        <img src="Images/bigboi.png">
                    </div>
                        <div class="textUnderline">
                            <p>Drive Team</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="six columns">
                    <a href="#3" id="mechBtn"><div class="Circ"></div>
                        <div class="textUnderline">
                            <p>Mechanical Executives</p>
                        </div></a>
                </div>
            </div>
    </div>

   

Answer 1

你需要添加overflow: hidden到.Circ div:

div.Circ{
 margin: 20px auto;
 border-radius: 50%; 
 width: 200px;
 height: 200px;  
 overflow: hidden; 
}