Question

我在左上角有一个折叠效果的容器，但是我无法隐藏左上背景。有人可以帮忙吗？

from numpy import *
import glob
box = 3.73014
list_of_files = glob.glob('./npt11.txt')
for file_name in list_of_files:
    f = loadtxt(file_name, float)
    g = zeros(3)
    # Specify a Donor water molecule's coordinate

        for i in range(0,5181,3):
        # Donor Oxygen vector
        x_DO = f[i, 0]
        y_DO = f[i, 1]
        z_DO = f[i, 2]
        r_DO = [x_DO, y_DO, z_DO]

        # Specify an around water molecules
        # DOAO vector list included in cut-off

        list_of_DOAO = []
        for j in range(i+3,5184,3):
            x_AO = f[j,0]
            y_AO = f[j,1] 
            z_AO = f[j,2]

            # DO-AO vector using periodic boundary condition
            x_DOAO = x_AO - x_DO
            x_DOAO = x_DOAO - box*round(x_DOAO/box)
            y_DOAO = y_AO - y_DO
            y_DOAO = y_DOAO - box*round(y_DOAO/box)
            z_DOAO = z_AO - z_DO
            z_DOAO = z_DOAO - box*round(z_DOAO/box)
            r_DOAO = [x_DOAO, y_DOAO, z_DOAO]
            r_DOAO_rev = [-x_DOAO, -y_DOAO, -z_DOAO]

            # DO-AO vector length
            rc = sqrt(dot(r_DOAO, r_DOAO))
            # Cut-off calculation
            # 1. Spherical searching of DO-AO distance
            if rc < 0.35:
                # Store the list of AO within the cut-off distance
                list_of_DOAO.append(r_DOAO)
        points = array(list_of_DOAO)
        ConvexHull(points)

QhullError                                Traceback (most recent call last)
<ipython-input-3-1312b5bd2eaf> in <module>()
     98                 list_of_DOAO.append(r_DOAO)
     99         points = array(list_of_DOAO)
--> 100         ConvexHull(points)
    101 

qhull.pyx in scipy.spatial.qhull.ConvexHull.__init__()

qhull.pyx in scipy.spatial.qhull._Qhull.__init__()

QhullError: QH6214 qhull input error: not enough points(3) to construct 
initial simplex (need 4)

While executing:  | qhull i Qt
Options selected for Qhull 2015.2.r 2016/01/18:
run-id 1666097638  incidence  Qtriangulate  _pre-merge  _zero-centrum

Answer 1

为确保我建议您进行一些更改：

在.container规则中删除overflow: hidden，因为它显然不会在视觉上影响结果（假设heigh属性保留为auto-因为<div>默认值是自动的。）

您只需要::before（删除::afeter），而是在-2px和top属性中设置left并设置white border-left颜色而不是透明颜色。

它看起来像这样：

.container{
  position:relative;   
  border: 2px solid blue;
  background-color: #FFF;
  color: #252525;
  font-size: 14px;
  line-height: 21px;
  margin-bottom:20px;
  padding:16px;
}

.container:before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;       
    border-bottom: 20px solid blue;
    border-left: 20px solid white; 
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
     <div class="container">
       Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners. 

        You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness continued ten. Admitting day him contained unfeeling attention mrs out. 
     </div>
  </body>

</html>

Answer 2

这里是只考虑容器和某些渐变作为边框和背景的想法：

.container {
  font-size: 14px;
  line-height: 21px;
  border: 2px solid blue;
  border-image:linear-gradient(135deg, transparent 16px, blue 16px) 2; 
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1px),blue calc(50% - 1px)) top left/20px 20px no-repeat;
  padding: 16px;
}

<div class="container">
  Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we
  give rest half. Painful so he an comfort is manners. You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness
  continued ten. Admitting day him contained unfeeling attention mrs out.
</div>

Answer 3

这会删除左上角的背景

.container{

  position:relative;   
    border: 2px solid blue;
    background-color: #FFF;
    color: #252525;
    font-size: 14px;
    line-height: 21px;
    margin-bottom:20px;
    padding:16px;
    overflow: hidden;
}

.container:before{
        content: "";
        position: absolute;
        top: 0;
        background:transparent;/* this is the new line, background transparent is the same as "removing" it */
        left: 0;       
        border-bottom: 20px solid blue;
        border-left: 20px solid transparent; 
}

.container:after{
    content: "";
        position: absolute;
        top: 0;
        left: 0;   
        width: 0px;
        height: 0px;
        border-top: 20px solid transparent;
        border-right: 20px solid blue;
}

CSS-左上角折叠效果

3 个答案: