如何使用 CSS/Bootstrap 3 制作斜线？

为了用 CSS 制作斜线，主要有两种方法。第一种方法涉及CSS的clip-path属性，在第二种方法中，我们使用CSS的skew()的transform属性。

方法一：使用clip-path属性： clip-path属性一般用于将元素裁剪成基本形状。但它也可以用于创建具有裁剪路径多边形形状调整属性的斜线。此属性的主要缺点是它的实现，因为需要观察和更改许多更改才能将其转换为斜线。

HTML

    
    
  
    
  
    
  
    

  

    

        
GeeksForGeeks
          
        

            This is a example of creating 
            oblique lines with content 
            using clip-path property of CSS. 
        
    
  
  
    


  

输出：

输出图像包含两条斜线，这是上述部分的缩放输出。

使用剪辑路径属性和多边形作为形状

方法2：使用transform 属性： CSS 的transform skew 属性有助于沿x 轴和y 轴旋转分区。 skewX() 和 skewY() 将旋转度数作为输入。与剪辑路径相比，此属性实现很简单。另外，如果您不想旋转内容，那么我们需要以与划分相反的方向旋转。

HTML

  

    
    
  
    
  
    
  
    

  

  
    

        
GeeksForGeeks
  
        

            This is a example of creating oblique 
            lines with content using transform 
            property of CSS. In this example 
            the skewY() is set to +5degrees. 
            You can change the angle according 
            to your need.
        
    

  

输出：

这里旋转围绕 y 轴，倾斜角度为 +5(deg)，而文本角度为 -5(deg)，以使文本变直。