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

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

方法1：使用剪切路径属性：剪切路径属性通常用于将元素剪切为基本形状。但它也可以用于创建具有剪切路径多边形形状的调整特性的斜线。此属性的主要缺点是其实现，并且由于需要观察和更改许多更改才能将其转换为斜线。

HTML

    
    
  
    
  
    
  
    

  

    

        
GeeksForGeeks
          
        

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


  

输出：

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

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

方法2：使用变换属性： CSS的变换偏斜属性有助于沿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)以使文本变直。